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;
25 .media-frame textarea {
30 .wp-admin .media-frame select {
40 .media-frame a:hover {
44 .media-frame a.button {
48 .media-frame a.button:hover {
52 .media-frame a.button-primary,
53 .media-frame a.button-primary:hover {
57 .media-frame input[type="text"],
58 .media-frame input[type="password"],
59 .media-frame input[type="number"],
60 .media-frame input[type="search"],
61 .media-frame input[type="email"],
62 .media-frame input[type="url"],
63 .media-frame textarea,
65 font-family: "Open Sans", sans-serif;
69 border-color: #dfdfdf;
72 .media-frame input[type="text"]:focus,
73 .media-frame input[type="password"]:focus,
74 .media-frame input[type="number"]:focus,
75 .media-frame input[type="search"]:focus,
76 .media-frame input[type="email"]:focus,
77 .media-frame input[type="url"]:focus,
78 .media-frame textarea:focus,
79 .media-frame select:focus {
80 border-color: #5b9dd9;
88 .media-frame input:disabled,
89 .media-frame textarea:disabled,
90 .media-frame input[readonly],
91 .media-frame textarea[readonly] {
92 background-color: #eee;
95 .media-frame input[type="search"] {
96 -webkit-appearance: textfield;
99 .media-frame :-moz-placeholder {
103 .media-frame .hidden {
107 /* Enable draggable on IE10 touch events until it's rolled into jQuery UI core */
110 -ms-touch-action: none;
114 .meta-box-sortables.ui-sortable {
115 -ms-touch-action: auto;
119 .meta-box-sortables.ui-sortable .hndle {
120 -ms-touch-action: none;
136 .wp-customizer .media-modal {
140 .media-modal-backdrop {
152 .wp-customizer .media-modal-backdrop {
158 text-decoration: none;
164 -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
165 transition: color .1s ease-in-out, background .1s ease-in-out;
168 .media-modal-close:active {
169 -webkit-box-shadow: none;
173 .media-modal-close span.media-modal-icon {
178 background-image: none;
182 .media-modal-close .media-modal-icon:before {
184 font: normal 20px/1 'dashicons';
186 vertical-align: middle;
187 -webkit-font-smoothing: antialiased;
188 -moz-osx-font-smoothing: grayscale;
192 .media-modal-close:hover .media-modal-icon:before {
196 .media-modal-close:active {
200 .media-modal-content {
208 -webkit-box-shadow: 0 5px 15px rgba(0,0,0,0.7);
209 box-shadow: 0 5px 15px rgba(0,0,0,0.7);
211 -webkit-font-smoothing: subpixel-antialiased;
215 background-image: url(../images/uploader-icons.png);
216 background-repeat: no-repeat;
230 border: 0 solid #dfdfdf;
234 .media-toolbar-primary {
239 .media-toolbar-secondary {
244 .media-toolbar-primary > .media-button,
245 .media-toolbar-primary > .media-button-group {
251 .media-toolbar-secondary > .media-button,
252 .media-toolbar-secondary > .media-button-group {
266 padding: 0 16px 24px;
269 border-right: 1px solid #ddd;
271 -webkit-overflow-scrolling: touch;
274 .hide-toolbar .media-sidebar {
278 .media-sidebar .sidebar-title {
281 padding: 12px 10px 10px;
285 .media-sidebar .sidebar-content {
287 margin-bottom: 130px;
290 .media-sidebar .search {
299 text-transform: uppercase;
305 .media-sidebar .setting,
306 .attachment-details .setting {
313 .media-sidebar .setting label,
314 .attachment-details .setting label {
318 .media-sidebar .setting .link-to-custom,
319 .attachment-details .setting .link-to-custom {
323 .media-sidebar .setting span,
324 .attachment-details .setting span {
331 .media-sidebar .setting select,
332 .attachment-details .setting select {
336 .media-sidebar .setting input[type="checkbox"],
337 .media-sidebar .field input[type="checkbox"],
338 .media-sidebar .setting input[type="radio"],
339 .media-sidebar .field input[type="radio"],
340 .attachment-details .setting input[type="checkbox"],
341 .attachment-details .field input[type="checkbox"],
342 .attachment-details .setting input[type="radio"],
343 .attachment-details .field input[type="radio"] {
349 .media-sidebar .setting span,
350 .attachment-details .setting span,
351 .compat-item label span {
360 .compat-item label span {
364 .media-sidebar .setting input[type="text"],
365 .media-sidebar .setting input[type="password"],
366 .media-sidebar .setting input[type="email"],
367 .media-sidebar .setting input[type="number"],
368 .media-sidebar .setting input[type="search"],
369 .media-sidebar .setting input[type="tel"],
370 .media-sidebar .setting input[type="url"],
371 .media-sidebar .setting textarea,
372 .media-sidebar .setting .value,
373 .attachment-details .setting input[type="text"],
374 .attachment-details .setting input[type="password"],
375 .attachment-details .setting input[type="email"],
376 .attachment-details .setting input[type="number"],
377 .attachment-details .setting input[type="search"],
378 .attachment-details .setting input[type="tel"],
379 .attachment-details .setting input[type="url"],
380 .attachment-details .setting textarea,
381 .attachment-details .setting .value {
382 -webkit-box-sizing: border-box;
383 -moz-box-sizing: border-box;
384 box-sizing: border-box;
390 .media-sidebar .setting .value,
391 .attachment-details .setting .value {
396 .media-sidebar .setting textarea,
397 .attachment-details .setting textarea,
398 .compat-item .field textarea {
403 .media-sidebar select,
404 .attachment-details select {
428 .compat-item .field {
434 .compat-item .label {
441 .compat-item .label span {
446 .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"] {
462 .sidebar-for-errors .attachment-details,
463 .sidebar-for-errors .compat-item,
464 .sidebar-for-errors .media-sidebar .media-progress-bar,
465 .sidebar-for-errors .upload-details {
466 display: none !important;
481 border-left-width: 1px;
482 border-left-style: solid;
483 border-left-color: #ccc;
484 -webkit-user-select: none;
485 -moz-user-select: none;
486 -ms-user-select: none;
498 text-decoration: none;
501 .media-menu > a:hover {
503 background: rgba( 0, 0, 0, 0.04 );
506 .media-menu > a:active {
511 .media-menu .active:hover {
516 .media-menu .separator {
520 border-top: 1px solid #ddd;
531 -webkit-user-select: none;
532 -moz-user-select: none;
533 -ms-user-select: none;
538 -webkit-transition: none;
545 padding: 8px 10px 9px;
550 text-decoration: none;
553 .media-router > a:last-child {
557 .media-router > a:active {
561 .media-router .active,
562 .media-router .active:hover {
566 .media-router .active,
567 .media-router > a.active:last-child {
570 border: 1px solid #ddd;
574 .media-router .active:after {
608 .media-frame-router {
617 .media-frame-content {
628 border-top: 1px solid #ddd;
629 border-bottom: 1px solid #ddd;
632 .media-frame-toolbar {
641 .media-frame.hide-menu .media-frame-title,
642 .media-frame.hide-menu .media-frame-router,
643 .media-frame.hide-menu .media-frame-toolbar,
644 .media-frame.hide-menu .media-frame-content {
648 .media-frame.hide-menu .media-frame-menu {
652 .media-frame.hide-toolbar .media-frame-content {
656 .media-frame.hide-toolbar .media-frame-toolbar {
660 .media-frame.hide-router .media-frame-content {
664 .media-frame.hide-router .media-frame-router {
668 .media-frame.hide-router .media-frame-title {
669 border-bottom: 1px solid #dfdfdf;
670 -webkit-box-shadow: 0 4px 4px -4px rgba( 0, 0, 0, 0.1 );
671 box-shadow: 0 4px 4px -4px rgba( 0, 0, 0, 0.1 );
674 .media-frame-title .dashicons {
678 .media-frame-title h1 {
685 .media-frame-title .suggested-dimensions {
691 .media-frame-content .crop-content {
695 .media-frame-content .crop-content .crop-image {
702 .media-frame-content .crop-content .upload-errors
708 margin-right: -150px;
716 .media-frame .media-iframe {
720 .media-frame .media-iframe,
721 .media-frame .media-iframe iframe {
728 * Attachment Browser Filters
730 .media-frame select.attachment-filters {
738 .media-frame .search {
743 font-family: "Open Sans", sans-serif;
744 -webkit-appearance: none;
747 .media-toolbar-secondary .search {
756 -webkit-overflow-scrolling: touch;
771 -webkit-user-select: none;
772 -moz-user-select: none;
773 -ms-user-select: none;
776 -webkit-box-sizing: border-box;
777 -moz-box-sizing: border-box;
778 box-sizing: border-box;
782 .selected.attachment:focus,
783 .attachment.details:focus {
785 inset 0 0 2px 3px #fff,
786 inset 0 0 0 7px #5b9dd9;
788 inset 0 0 2px 3px #fff,
789 inset 0 0 0 7px #5b9dd9;
793 .selected.attachment {
795 inset 0 0 0 5px #fff,
796 inset 0 0 0 7px #ccc;
798 inset 0 0 0 5px #fff,
799 inset 0 0 0 7px #ccc;
802 .attachment.details {
804 inset 0 0 0 3px #fff,
805 inset 0 0 0 7px #1e8cbe;
807 inset 0 0 0 3px #fff,
808 inset 0 0 0 7px #1e8cbe;
811 .attachment-preview {
814 inset 0 0 15px rgba( 0, 0, 0, 0.1 ),
815 inset 0 0 0 1px rgba( 0, 0, 0, 0.05 );
817 inset 0 0 15px rgba( 0, 0, 0, 0.1 ),
818 inset 0 0 0 1px rgba( 0, 0, 0, 0.05 );
823 .attachment-preview:before {
834 .attachment .thumbnail {
842 -webkit-transition: opacity .1s;
843 transition: opacity .1s;
846 .attachment .portrait img {
850 .attachment .landscape img {
854 .attachment .thumbnail:after {
862 -webkit-box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
863 box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
868 .attachment .thumbnail img {
874 .attachment .thumbnail .centered {
880 -webkit-transform: translate( 50%, 50% );
881 -ms-transform: translate(50%,50%); /* Fails with spaces?? Weird! */
882 transform: translate( 50%, 50% );
885 .attachment .thumbnail .centered img {
886 -webkit-transform: translate( -50%, -50% );
887 -ms-transform: translate(-50%,-50%);
888 transform: translate( -50%, -50% );
891 .attachment .thumbnail .centered img.icon {
892 -webkit-transform: translate( -50%, -70% );
893 -ms-transform: translate(-50%,-70%);
894 transform: translate( -50%, -70% );
897 .ie8 .attachment img.icon {
902 .attachment .filename {
909 word-wrap: break-word;
912 background: rgba( 255, 255, 255, 0.8 );
913 -webkit-box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
914 box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
917 .attachment .filename div {
921 .attachment .thumbnail img {
936 text-decoration: none;
938 background-color: #fff;
939 background-position: -96px 4px;
941 -webkit-border-radius: 3px;
943 -webkit-box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.3 );
944 box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.3 );
947 .attachment .close:hover {
948 -webkit-box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.6 );
949 box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.6 );
952 .attachment:hover .close {
966 -webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba( 0, 0, 0, 0.15 );
967 box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba( 0, 0, 0, 0.15 );
970 .attachment .check div {
971 background-position: -1px 0;
977 .attachment .check:hover div {
978 background-position: -40px 0;
981 .attachment.selected .check {
985 .attachment.details .check,
986 .attachment.selected .check:focus,
987 .media-frame.mode-grid .attachment.selected .check {
988 background-color: #1e8cbe;
997 .attachment.details .check div,
998 .media-frame.mode-grid .attachment.selected .check div {
999 background-position: -21px 0;
1002 .attachment.details .check:hover div,
1003 .attachment.selected .check:focus div,
1004 .media-frame.mode-grid .attachment.selected .check:hover div {
1005 background-position: -60px 0;
1008 .media-frame .attachment .describe {
1015 -webkit-border-radius: 0;
1020 * Attachments Browser
1022 .media-frame .attachments-browser {
1029 .attachments-browser .media-toolbar {
1034 .attachments-browser.hide-sidebar .media-toolbar {
1038 .attachments-browser .media-toolbar-primary > .media-button,
1039 .attachments-browser .media-toolbar-primary > .media-button-group,
1040 .attachments-browser .media-toolbar-secondary > .media-button,
1041 .attachments-browser .media-toolbar-secondary > .media-button-group {
1045 .attachments-browser .attachments {
1046 padding: 2px 8px 8px;
1049 .attachments-browser .attachments,
1050 .attachments-browser .uploader-inline {
1060 .attachments-browser .uploader-inline.hidden {
1064 .uploader-inline .close {
1065 background-color: transparent;
1077 .uploader-inline .close:before {
1078 font: normal 30px/50px 'dashicons' !important;
1080 display: inline-block;
1085 .attachments-browser.hide-sidebar .attachments,
1086 .attachments-browser.hide-sidebar .uploader-inline {
1091 .attachments-browser .instructions {
1092 display: inline-block;
1100 .attachments-browser .no-media {
1101 padding: 2em 2em 0 0;
1107 .media-progress-bar {
1112 -webkit-border-radius: 10px;
1113 border-radius: 10px;
1114 background: #dfdfdf;
1115 background: rgba( 0, 0, 0, 0.1 );
1118 .media-progress-bar div {
1122 background: #1e8cbe;
1123 -webkit-border-radius: 10px;
1124 border-radius: 10px;
1125 -webkit-transition: width 300ms;
1126 transition: width 300ms;
1129 .media-uploader-status .media-progress-bar {
1134 .uploading.media-uploader-status .media-progress-bar {
1138 .attachment-preview .media-progress-bar {
1146 .media-uploader-status {
1149 padding-bottom: 10px;
1153 .media-sidebar .media-uploader-status {
1154 border-bottom: 1px solid #dfdfdf;
1157 .uploader-inline .media-uploader-status h3 {
1161 .media-uploader-status .upload-details {
1167 .uploading.media-uploader-status .upload-details {
1171 .media-uploader-status .upload-detail-separator {
1175 .media-uploader-status .upload-count {
1179 .media-uploader-status .upload-dismiss-errors,
1180 .media-uploader-status .upload-errors {
1184 .errors.media-uploader-status .upload-dismiss-errors,
1185 .errors.media-uploader-status .upload-errors {
1189 .media-uploader-status .upload-dismiss-errors {
1190 text-decoration: none;
1193 .media-sidebar .media-uploader-status .upload-dismiss-errors {
1199 .upload-errors .upload-error {
1200 margin: 8px auto 0 auto;
1202 border: 1px #c00 solid;
1203 background: #ffebe8;
1204 -webkit-border-radius: 3px;
1208 .upload-errors .upload-error-label {
1214 background-image: -webkit-gradient(linear, right top, right bottom, from(#e00), to(#a00));
1215 background-image: -webkit-linear-gradient(top, #e00, #a00);
1216 background-image: linear-gradient(to bottom, #e00, #a00);
1217 -webkit-border-radius: 3px;
1221 .upload-errors .upload-error-message {
1225 word-wrap: break-word;
1234 background: rgba( 0, 86, 132, 0.9 );
1239 -webkit-transition: opacity 250ms;
1240 transition: opacity 250ms;
1243 .uploader-window-content {
1249 border: 1px dashed #fff;
1252 .uploader-window h3 {
1258 -webkit-transform: translateY( -50% );
1259 -ms-transform: translateY(-50%);
1260 transform: translateY( -50% );
1266 .uploader-window .media-progress-bar {
1269 background: transparent;
1274 .uploader-window .media-progress-bar div {
1278 .uploading .uploader-window .media-progress-bar {
1282 .media-frame .uploader-inline {
1283 margin-bottom: 20px;
1288 .uploader-inline-content {
1295 .uploader-inline-content .upload-ui {
1299 .uploader-inline-content .post-upload-ui {
1303 .uploader-inline .has-upload-message .upload-ui {
1307 .uploader-inline h3 {
1314 .uploader-inline .has-upload-message .upload-instructions {
1317 font-weight: normal;
1320 .uploader-inline .drop-instructions {
1324 .supports-drag-drop .uploader-inline .drop-instructions {
1328 .uploader-inline p {
1333 .uploader-inline .media-progress-bar {
1337 .uploading.uploader-inline .media-progress-bar {
1341 .uploader-inline .browser {
1342 display: inline-block !important;
1354 padding: 0 16px 0 0;
1356 white-space: nowrap;
1359 .media-selection .selection-info {
1360 display: inline-block;
1364 vertical-align: top;
1367 .media-selection.empty,
1368 .media-selection.editing {
1372 .media-selection.one .edit-selection {
1376 .media-selection .count {
1384 .media-selection .selection-info a {
1388 margin: 1px -8px 1px 8px;
1390 text-decoration: none;
1391 border-left: 1px solid #dfdfdf;
1395 .media-selection .selection-info a:hover {
1396 background: #21759B;
1398 border-color: transparent;
1401 .media-selection .selection-info a:last-child {
1406 .media-selection .selection-info .clear-selection {
1410 .media-selection .selection-info .clear-selection:hover {
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 {
1432 -webkit-box-shadow: none;
1436 .media-selection .attachment .thumbnail {
1443 .media-selection .attachment .icon {
1447 .media-selection .attachment-preview {
1448 -webkit-box-shadow: none;
1453 .media-selection .attachment.selection.details .thumbnail {
1462 .media-selection:after {
1470 background-image: -webkit-gradient(linear, left top, right top, from(rgba( 255, 255, 255, 1 )), to(rgba( 255, 255, 255, 0 )));
1471 background-image: -webkit-linear-gradient(left, rgba( 255, 255, 255, 1 ), rgba( 255, 255, 255, 0 ));
1472 background-image: linear-gradient(to right, rgba( 255, 255, 255, 1 ) , rgba( 255, 255, 255, 0 ) );
1475 .media-selection .attachment .filename {
1482 .media-frame .spinner {
1483 background: url(../images/spinner.gif) no-repeat;
1484 -webkit-background-size: 20px 20px;
1485 background-size: 20px 20px;
1488 filter: alpha(opacity=70);
1494 .media-toolbar .spinner {
1499 * Attachment Details
1501 .attachment-details {
1506 .attachment-details .settings-save-status {
1508 text-transform: none;
1512 .attachment-details .settings-save-status .spinner {
1516 .attachment-details .settings-save-status .saved {
1521 .attachment-details.save-waiting .settings-save-status .spinner,
1522 .attachment-details.save-complete .settings-save-status .saved {
1529 margin-bottom: 16px;
1532 border-bottom: 1px solid #ddd;
1533 padding-bottom: 11px;
1536 .attachment-info .filename {
1539 word-wrap: break-word;
1542 .attachment-info .thumbnail {
1552 .uploading .attachment-info .thumbnail {
1555 -webkit-box-shadow: inset 0 0 15px rgba( 0, 0, 0, 0.1 );
1556 box-shadow: inset 0 0 15px rgba( 0, 0, 0, 0.1 );
1559 .uploading .attachment-info .media-progress-bar {
1563 .attachment-info .thumbnail-image:after {
1571 -webkit-box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
1572 box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
1576 .attachment-info .thumbnail img {
1583 .attachment-info .details {
1589 .attachment-info .edit-attachment,
1590 .attachment-info .refresh-attachment,
1591 .attachment-info .delete-attachment,
1592 .attachment-info .trash-attachment,
1593 .attachment-info .untrash-attachment {
1595 text-decoration: none;
1596 white-space: nowrap;
1599 .attachment-info .refresh-attachment,
1600 .attachment-details.needs-refresh .attachment-info .edit-attachment {
1604 .attachment-details.needs-refresh .attachment-info .refresh-attachment,
1605 .attachment-info .edit-attachment {
1609 .media-modal .delete-attachment,
1610 .media-modal .trash-attachment,
1611 .media-modal .untrash-attachment {
1615 .media-modal .delete-attachment:hover,
1616 .media-modal .trash-attachment:hover,
1617 .media-modal .untrash-attachment:hover {
1622 * Attachment Display Settings
1624 .attachment-display-settings {
1630 .attachment-display-settings h4 {
1631 margin: 1.4em 0 0.4em;
1634 .collection-settings {
1638 .collection-settings .setting input[type="checkbox"] {
1643 .collection-settings .setting span {
1650 .media-modal .imgedit-wrap {
1654 .media-modal .imgedit-wait {
1655 height: auto !important;
1661 .media-modal .imgedit-wrap .imgedit-panel-content {
1671 .media-modal .imgedit-wrap .imgedit-settings {
1672 background: #f3f3f3;
1673 border-right: 1px solid #ddd;
1674 padding: 0 16px 16px;
1683 .media-modal .imgedit-group {
1686 border-bottom: 1px solid #ddd;
1687 -webkit-box-shadow: none;
1690 margin-bottom: 16px;
1692 padding-bottom: 16px;
1693 position: relative; /* RTL fix, #WP29352 */
1696 .media-modal .imgedit-group:last-of-type {
1702 .media-modal .imgedit-group-top h3 {
1703 text-transform: uppercase;
1710 .media-modal .imgedit-group-top h3 a {
1711 text-decoration: none;
1715 .media-modal .imgedit-help-toggle {
1721 .media-modal .imgedit-help-toggled span.dashicons:before {
1725 .media-modal .imgedit-group img {
1729 .media-modal .imgedit-wrap div.updated {
1731 margin-bottom: 16px;
1736 * Embed from URL and Image Details
1748 .media-frame .embed-url input {
1753 -webkit-box-shadow: inset 2px 2px 4px -2px rgba( 0, 0, 0, 0.1 );
1754 box-shadow: inset 2px 2px 4px -2px rgba( 0, 0, 0, 0.1 );
1757 .media-frame .embed-url .spinner {
1763 .media-frame .embed-loading .embed-url .spinner {
1767 .embed-link-settings,
1768 .embed-media-settings {
1774 padding: 16px 16px 32px;
1778 .embed-preview img, .embed-preview iframe, .embed-preview embed {
1782 .embed-preview img {
1786 .image-details .media-modal {
1791 .image-details .media-frame-title,
1792 .image-details .media-frame-content,
1793 .image-details .media-frame-router {
1797 .image-details .embed-media-settings {
1803 .image-details .embed-media-settings,
1804 .image-details .embed-media-settings div {
1805 -webkit-box-sizing: border-box;
1806 -moz-box-sizing: border-box;
1807 box-sizing: border-box;
1810 .image-details .column-settings {
1811 background: #f3f3f3;
1812 border-left: 1px solid #ddd;
1820 .image-details .column-settings h3 {
1823 border-top: 1px solid #ddd;
1826 .image-details .column-image {
1833 .image-details .image {
1837 .image-details .image img {
1842 .image-details .advanced-toggle {
1844 text-decoration: none;
1848 .image-details .advanced-toggle:after {
1849 font: normal 20px/1 'dashicons';
1851 vertical-align: top;
1852 -webkit-font-smoothing: antialiased;
1853 -moz-osx-font-smoothing: grayscale;
1855 display: inline-block;
1859 .image-details .advanced-visible .advanced-toggle:after {
1863 .image-details .embed-media-settings .size {
1867 .image-details .custom-size span {
1871 .image-details .custom-size label {
1876 .image-details .custom-size span small {
1881 .image-details .custom-size input {
1885 .image-details .custom-size .sep {
1887 margin: 26px 6px 0 6px;
1890 .image-details .custom-size:after {
1896 .media-embed .thumbnail {
1903 .media-embed .thumbnail img {
1908 .media-embed .thumbnail:after {
1916 -webkit-box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
1917 box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
1921 .media-embed .setting {
1929 .image-details .embed-media-settings .setting {
1934 .image-details .actions {
1938 .image-details .hidden {
1942 .media-embed .setting input[type="text"],
1943 .media-embed .setting textarea {
1950 .image-details .embed-media-settings .setting input[type="text"],
1951 .image-details .embed-media-settings .setting textarea {
1956 .image-details .embed-media-settings .setting input.link-to-custom,
1957 .image-details .embed-media-settings .link-target,
1958 .image-details .embed-media-settings .custom-size {
1963 .image-details .embed-media-settings .link-target {
1967 .media-embed .setting input.hidden,
1968 .media-embed .setting textarea.hidden {
1972 .media-embed .setting span {
1980 .image-details .embed-media-settings .setting span {
1984 margin: 8px 1% 0 1%;
1988 .media-embed .setting .button-group {
1992 .media-embed-sidebar {
2003 /* Drag & drop on the editor upload */
2004 #wp-fullscreen-body .uploader-editor,
2005 .wp-editor-wrap .uploader-editor {
2006 background: rgba( 150, 150, 150, 0.9 );
2012 z-index: 99998; /* under the toolbar */
2017 #wp-fullscreen-body .uploader-editor {
2018 background: rgba( 0, 86, 132, 0.9 );
2020 z-index: 100050; /* above the editor toolbar */
2023 .wp-editor-wrap.wp-fullscreen-wrap .uploader-editor {
2027 #wp-fullscreen-body .uploader-editor-content,
2028 .wp-editor-wrap .uploader-editor-content {
2029 border: 1px dashed #fff;
2037 #wp-fullscreen-body .uploader-editor .uploader-editor-title,
2038 .wp-editor-wrap .uploader-editor .uploader-editor-title {
2043 -webkit-transform: translateY( -50% );
2044 -ms-transform: translateY(-50%);
2045 transform: translateY( -50% );
2055 .wp-editor-wrap .uploader-editor.droppable {
2056 background: rgba( 0, 86, 132, 0.9 );
2059 #wp-fullscreen-body .uploader-editor .uploader-editor-title,
2060 .wp-editor-wrap .uploader-editor.droppable .uploader-editor-title {
2067 .ie7 .media-frame .attachments-browser {
2071 .ie7 .media-frame .embed-url input {
2080 .ie7 .attachment-display-settings {
2084 .ie7 .attachment-preview,
2085 .ie7 .attachment-preview .thumbnail {
2090 .ie7 .media-frame .attachment .describe {
2094 .ie7 .media-sidebar .setting select {
2098 .ie7 .media-sidebar .setting input[type="text"],
2099 .ie7 .media-sidebar .setting input[type="password"],
2100 .ie7 .media-sidebar .setting input[type="email"],
2101 .ie7 .media-sidebar .setting input[type="number"],
2102 .ie7 .media-sidebar .setting input[type="search"],
2103 .ie7 .media-sidebar .setting input[type="tel"],
2104 .ie7 .media-sidebar .setting input[type="url"],
2105 .ie7 .media-sidebar .setting textarea {
2109 .ie7 .media-sidebar .setting .link-to-custom {
2118 .rtl .media-frame .search,
2119 .rtl .media-frame input[type="text"],
2120 .rtl .media-frame input[type="password"],
2121 .rtl .media-frame input[type="number"],
2122 .rtl .media-frame input[type="search"],
2123 .rtl .media-frame input[type="email"],
2124 .rtl .media-frame input[type="url"],
2125 .rtl .media-frame input[type="tel"],
2126 .rtl .media-frame textarea,
2127 .rtl .media-frame select {
2128 font-family: Tahoma, sans-serif;
2131 :lang(he-il) .rtl .media-modal,
2132 :lang(he-il) .rtl .media-frame,
2133 :lang(he-il) .rtl .media-frame .search,
2134 :lang(he-il) .rtl .media-frame input[type="text"],
2135 :lang(he-il) .rtl .media-frame input[type="password"],
2136 :lang(he-il) .rtl .media-frame input[type="number"],
2137 :lang(he-il) .rtl .media-frame input[type="search"],
2138 :lang(he-il) .rtl .media-frame input[type="email"],
2139 :lang(he-il) .rtl .media-frame input[type="url"],
2140 :lang(he-il) .rtl .media-frame textarea,
2141 :lang(he-il) .rtl .media-frame select {
2142 font-family: Arial, sans-serif;
2145 @media only screen and (max-width: 940px) {
2146 .media-frame-content .media-toolbar-primary .search,
2147 .media-frame-content .media-toolbar-secondary .attachment-filters {
2155 @media only screen and (max-width: 900px) {
2157 /* Drop-down menu */
2158 .media-frame:not(.hide-menu) .media-frame-title,
2159 .media-frame:not(.hide-menu) .media-frame-router,
2160 .media-frame:not(.hide-menu) .media-frame-content,
2161 .media-frame:not(.hide-menu) .media-frame-toolbar {
2165 .media-frame:not(.hide-menu) .media-frame-menu {
2170 .media-frame:not(.hide-menu) .media-menu {
2180 border: 1px solid #ccc;
2183 .media-frame:not(.hide-menu) .media-menu.visible {
2187 .media-frame:not(.hide-menu) .media-menu > a {
2192 .media-frame:not(.hide-menu) .media-menu > a.active {
2196 .media-frame:not(.hide-menu) .media-menu .separator {
2200 .media-frame:not(.hide-menu) .media-frame-title {
2205 .media-frame:not(.hide-menu) .media-frame-title .dashicons {
2206 display: inline-block;
2210 .media-frame:not(.hide-menu) .media-frame-title h1 {
2216 /* End drop-down menu */
2222 .attachments-browser .attachments,
2223 .attachments-browser .uploader-inline,
2224 .attachments-browser .media-toolbar {
2228 .media-sidebar .setting,
2229 .attachment-details .setting {
2233 .media-sidebar .setting input,
2234 .media-sidebar .setting textarea,
2235 .media-sidebar .setting span,
2236 .attachment-details .setting input,
2237 .attachment-details .setting textarea,
2238 .attachment-details .setting span,
2239 .compat-item label span {
2243 .media-sidebar .setting span,
2244 .attachment-details .setting span,
2245 .compat-item label span {
2246 text-align: inherit;
2252 .media-sidebar .setting .value,
2253 .attachment-details .setting .value {
2258 .media-sidebar .setting input[type="text"],
2259 .media-sidebar .setting input[type="password"],
2260 .media-sidebar .setting input[type="email"],
2261 .media-sidebar .setting input[type="number"],
2262 .media-sidebar .setting input[type="search"],
2263 .media-sidebar .setting input[type="tel"],
2264 .media-sidebar .setting input[type="url"],
2265 .media-sidebar .setting textarea,
2266 .media-sidebar .setting select,
2267 .attachment-details .setting input[type="text"],
2268 .attachment-details .setting input[type="password"],
2269 .attachment-details .setting input[type="email"],
2270 .attachment-details .setting input[type="number"],
2271 .attachment-details .setting input[type="search"],
2272 .attachment-details .setting input[type="tel"],
2273 .attachment-details .setting input[type="url"],
2274 .attachment-details .setting textarea,
2275 .attachment-details .setting select {
2282 .media-sidebar .setting select.columns,
2283 .attachment-details .setting select.columns {
2288 .media-frame textarea,
2289 .media-frame .search {
2293 .image-details .column-image {
2298 .image-details .column-settings {
2302 .image-details .media-modal {
2307 .image-details .embed-media-settings .setting {
2311 .image-details .embed-media-settings .setting span {
2318 .image-details .embed-media-settings .setting input.link-to-custom,
2319 .image-details .embed-media-settings .setting input[type="text"],
2320 .image-details .embed-media-settings .setting textarea {
2325 .image-details .embed-media-settings .custom-size {
2329 .collection-settings .setting input[type="checkbox"] {
2337 .media-selection:after {
2341 .media-selection .attachments {
2345 .media-modal .attachments-browser .media-toolbar-primary,
2346 .media-modal .attachments-browser .media-toolbar-secondary {
2350 .media-modal .attachments-browser .media-toolbar .search {
2356 .media-modal .attachments-browser .media-toolbar .attachment-filters {
2360 max-width: -webkit-calc(100% - 38px);
2361 max-width: calc(100% - 38px);
2364 .media-modal .attachments-browser .media-toolbar .spinner {
2368 /* Text inputs need to be 16px, or they force zooming on iOS */
2369 .media-frame input[type="text"],
2370 .media-frame input[type="password"],
2371 .media-frame input[type="number"],
2372 .media-frame input[type="search"],
2373 .media-frame input[type="email"],
2374 .media-frame input[type="url"],
2375 .media-frame textarea,
2376 .media-frame select {
2381 /* Responsive on portrait and landscape */
2382 @media only screen and (max-width: 640px), screen and (max-height: 400px) {
2383 /* Full-bleed modal */
2385 .image-details .media-modal {
2393 .media-modal-backdrop {
2401 -webkit-box-sizing: border-box;
2402 -moz-box-sizing: border-box;
2403 box-sizing: border-box;
2407 .media-sidebar.visible {
2411 .attachments-browser .attachments,
2412 .attachments-browser .uploader-inline,
2413 .attachments-browser .media-toolbar {
2417 .image-details .media-frame-title {
2423 .image-details .column-image,
2424 .image-details .column-settings {
2430 .image-details .column-settings {
2434 /* Media tabs on the top */
2435 .media-frame-content .media-toolbar .instructions {
2440 /* Landscape specific header override */
2441 @media screen and (max-height: 400px) {
2446 .media-frame-router {
2450 .media-frame-content {
2454 .attachments-browser .attachments {
2458 /* Prevent unnecessary scrolling on title input */
2459 .embed-link-settings {
2464 @media only screen and (max-width: 480px) {
2465 .media-frame-content .media-toolbar .search,
2466 .media-frame-content .media-toolbar .attachment-filters {
2470 .media-modal-close {
2475 .media-modal .media-frame-title {
2479 .media-modal .media-frame-title h1,
2480 .media-frame:not(.hide-menu) .media-frame-title h1 {
2485 .media-frame:not(.hide-menu) .media-frame-title .dashicons {
2489 .media-frame-router,
2490 .media-frame:not(.hide-menu) .media-menu {
2494 .media-frame-content {
2498 .media-frame.hide-router .media-frame-content {
2507 (-o-min-device-pixel-ratio: 5/4),
2508 (-webkit-min-device-pixel-ratio: 1.25),
2509 (min-resolution: 120dpi) {
2512 background-image: url(../images/uploader-icons-2x.png);
2513 -webkit-background-size: 134px 15px;
2514 background-size: 134px 15px;
2517 .media-frame .spinner {
2518 background-image: url(../images/spinner-2x.gif);
2522 .media-frame-content[data-columns="1"] .attachment {
2526 .media-frame-content[data-columns="2"] .attachment {
2530 .media-frame-content[data-columns="3"] .attachment {
2534 .media-frame-content[data-columns="4"] .attachment {
2538 .media-frame-content[data-columns="5"] .attachment {
2542 .media-frame-content[data-columns="6"] .attachment {
2546 .media-frame-content[data-columns="7"] .attachment {
2550 .media-frame-content[data-columns="8"] .attachment {
2554 .media-frame-content[data-columns="9"] .attachment {
2558 .media-frame-content[data-columns="10"] .attachment {
2562 .media-frame-content[data-columns="11"] .attachment {
2566 .media-frame-content[data-columns="12"] .attachment {