5 -webkit-box-sizing: content-box;
6 -moz-box-sizing: content-box;
7 box-sizing: content-box;
12 font-family: "Open Sans", sans-serif;
17 .media-frame textarea {
22 .wp-admin .media-frame select {
32 .media-frame a:hover {
36 .media-frame a.button {
40 .media-frame a.button:hover {
44 .media-frame a.button-primary,
45 .media-frame a.button-primary:hover {
49 .media-frame input[type="text"],
50 .media-frame input[type="password"],
51 .media-frame input[type="number"],
52 .media-frame input[type="search"],
53 .media-frame input[type="email"],
54 .media-frame input[type="url"],
55 .media-frame textarea,
57 font-family: "Open Sans", sans-serif;
59 -webkit-box-sizing: border-box;
60 -moz-box-sizing: border-box;
61 box-sizing: border-box;
64 border-color: #dfdfdf;
67 .media-frame input[type="text"]:focus,
68 .media-frame input[type="password"]:focus,
69 .media-frame input[type="number"]:focus,
70 .media-frame input[type="search"]:focus,
71 .media-frame input[type="email"]:focus,
72 .media-frame input[type="url"]:focus,
73 .media-frame textarea:focus,
74 .media-frame select:focus {
75 border-color: #5b9dd9;
83 .media-frame input:disabled,
84 .media-frame textarea:disabled,
85 .media-frame input[readonly],
86 .media-frame textarea[readonly] {
87 background-color: #eee;
90 .media-frame input[type="search"] {
91 -webkit-appearance: textfield;
94 .media-frame :-moz-placeholder {
98 .media-frame .hidden {
102 /* Enable draggable on IE10 touch events until it's rolled into jQuery UI core */
105 -ms-touch-action: none;
109 .meta-box-sortables.ui-sortable {
110 -ms-touch-action: auto;
114 .meta-box-sortables.ui-sortable .hndle {
115 -ms-touch-action: none;
131 .wp-customizer .media-modal {
135 .media-modal-backdrop {
147 .wp-customizer .media-modal-backdrop {
153 text-decoration: none;
159 -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
160 transition: color .1s ease-in-out, background .1s ease-in-out;
163 .media-modal-close:active {
164 -webkit-box-shadow: none;
168 .media-modal-close span.media-modal-icon {
173 background-image: none;
177 .media-modal-close .media-modal-icon:before {
179 font: normal 20px/1 'dashicons';
181 vertical-align: middle;
182 -webkit-font-smoothing: antialiased;
183 -moz-osx-font-smoothing: grayscale;
187 .media-modal-close:hover .media-modal-icon:before {
191 .media-modal-close:active {
195 .media-modal-content {
203 -webkit-box-shadow: 0 5px 15px rgba(0,0,0,0.7);
204 box-shadow: 0 5px 15px rgba(0,0,0,0.7);
206 -webkit-font-smoothing: subpixel-antialiased;
210 background-image: url(../images/uploader-icons.png);
211 background-repeat: no-repeat;
225 border: 0 solid #dfdfdf;
229 .media-toolbar-primary {
234 .media-toolbar-secondary {
239 .media-toolbar-primary > .media-button,
240 .media-toolbar-primary > .media-button-group {
246 .media-toolbar-secondary > .media-button,
247 .media-toolbar-secondary > .media-button-group {
261 padding: 0 16px 24px;
264 border-right: 1px solid #ddd;
266 -webkit-overflow-scrolling: touch;
269 .hide-toolbar .media-sidebar {
273 .media-sidebar .sidebar-title {
276 padding: 12px 10px 10px;
280 .media-sidebar .sidebar-content {
282 margin-bottom: 130px;
285 .media-sidebar .search {
294 text-transform: uppercase;
300 .media-sidebar .setting,
301 .attachment-details .setting {
308 .media-sidebar .setting label,
309 .attachment-details .setting label {
313 .media-sidebar .setting .link-to-custom,
314 .attachment-details .setting .link-to-custom {
318 .media-sidebar .setting span,
319 .attachment-details .setting span {
326 .media-sidebar .setting select,
327 .attachment-details .setting select {
331 .media-sidebar .setting input[type="checkbox"],
332 .media-sidebar .field input[type="checkbox"],
333 .media-sidebar .setting input[type="radio"],
334 .media-sidebar .field input[type="radio"],
335 .attachment-details .setting input[type="checkbox"],
336 .attachment-details .field input[type="checkbox"],
337 .attachment-details .setting input[type="radio"],
338 .attachment-details .field input[type="radio"] {
344 .media-sidebar .setting span,
345 .attachment-details .setting span,
346 .compat-item label span {
355 .compat-item label span {
359 .media-sidebar .setting input[type="text"],
360 .media-sidebar .setting input[type="password"],
361 .media-sidebar .setting input[type="email"],
362 .media-sidebar .setting input[type="number"],
363 .media-sidebar .setting input[type="search"],
364 .media-sidebar .setting input[type="tel"],
365 .media-sidebar .setting input[type="url"],
366 .media-sidebar .setting textarea,
367 .media-sidebar .setting .value,
368 .attachment-details .setting input[type="text"],
369 .attachment-details .setting input[type="password"],
370 .attachment-details .setting input[type="email"],
371 .attachment-details .setting input[type="number"],
372 .attachment-details .setting input[type="search"],
373 .attachment-details .setting input[type="tel"],
374 .attachment-details .setting input[type="url"],
375 .attachment-details .setting textarea,
376 .attachment-details .setting .value {
377 -webkit-box-sizing: border-box;
378 -moz-box-sizing: border-box;
379 box-sizing: border-box;
385 .media-sidebar .setting .value,
386 .attachment-details .setting .value {
391 .media-sidebar .setting textarea,
392 .attachment-details .setting textarea,
393 .compat-item .field textarea {
398 .media-sidebar select,
399 .attachment-details select {
423 .compat-item .field {
429 .compat-item .label {
436 .compat-item .label span {
441 .compat-item .field {
446 .compat-item .field input[type="text"],
447 .compat-item .field input[type="password"],
448 .compat-item .field input[type="email"],
449 .compat-item .field input[type="number"],
450 .compat-item .field input[type="search"],
451 .compat-item .field input[type="tel"],
452 .compat-item .field input[type="url"] {
457 .sidebar-for-errors .attachment-details,
458 .sidebar-for-errors .compat-item,
459 .sidebar-for-errors .media-sidebar .media-progress-bar,
460 .sidebar-for-errors .upload-details {
461 display: none !important;
476 border-left-width: 1px;
477 border-left-style: solid;
478 border-left-color: #ccc;
479 -webkit-user-select: none;
480 -moz-user-select: none;
481 -ms-user-select: none;
493 text-decoration: none;
496 .media-menu > a:hover {
498 background: rgba( 0, 0, 0, 0.04 );
501 .media-menu > a:active {
506 .media-menu .active:hover {
511 .media-menu .separator {
515 border-top: 1px solid #ddd;
526 -webkit-user-select: none;
527 -moz-user-select: none;
528 -ms-user-select: none;
533 -webkit-transition: none;
540 padding: 8px 10px 9px;
545 text-decoration: none;
548 .media-router > a:last-child {
552 .media-router > a:active {
556 .media-router .active,
557 .media-router .active:hover {
561 .media-router .active,
562 .media-router > a.active:last-child {
565 border: 1px solid #ddd;
569 .media-router .active:after {
603 .media-frame-router {
612 .media-frame-content {
623 border-top: 1px solid #ddd;
624 border-bottom: 1px solid #ddd;
627 .media-frame-toolbar {
636 .media-frame.hide-menu .media-frame-title,
637 .media-frame.hide-menu .media-frame-router,
638 .media-frame.hide-menu .media-frame-toolbar,
639 .media-frame.hide-menu .media-frame-content {
643 .media-frame.hide-menu .media-frame-menu {
647 .media-frame.hide-toolbar .media-frame-content {
651 .media-frame.hide-toolbar .media-frame-toolbar {
655 .media-frame.hide-router .media-frame-content {
659 .media-frame.hide-router .media-frame-router {
663 .media-frame.hide-router .media-frame-title {
664 border-bottom: 1px solid #dfdfdf;
665 -webkit-box-shadow: 0 4px 4px -4px rgba( 0, 0, 0, 0.1 );
666 box-shadow: 0 4px 4px -4px rgba( 0, 0, 0, 0.1 );
669 .media-frame-title .dashicons {
673 .media-frame-title h1 {
680 .media-frame-title .suggested-dimensions {
686 .media-frame-content .crop-content {
690 .media-frame-content .crop-content .crop-image {
697 .media-frame-content .crop-content .upload-errors
703 margin-right: -150px;
711 .media-frame .media-iframe {
715 .media-frame .media-iframe,
716 .media-frame .media-iframe iframe {
723 * Attachment Browser Filters
725 .media-frame select.attachment-filters {
733 .media-frame .search {
738 font-family: "Open Sans", sans-serif;
739 -webkit-appearance: none;
742 .media-toolbar-secondary .search {
751 -webkit-overflow-scrolling: touch;
766 -webkit-user-select: none;
767 -moz-user-select: none;
768 -ms-user-select: none;
771 -webkit-box-sizing: border-box;
772 -moz-box-sizing: border-box;
773 box-sizing: border-box;
777 .selected.attachment:focus,
778 .attachment.details:focus {
780 inset 0 0 2px 3px #fff,
781 inset 0 0 0 7px #5b9dd9;
783 inset 0 0 2px 3px #fff,
784 inset 0 0 0 7px #5b9dd9;
788 .selected.attachment {
790 inset 0 0 0 5px #fff,
791 inset 0 0 0 7px #ccc;
793 inset 0 0 0 5px #fff,
794 inset 0 0 0 7px #ccc;
797 .attachment.details {
799 inset 0 0 0 3px #fff,
800 inset 0 0 0 7px #1e8cbe;
802 inset 0 0 0 3px #fff,
803 inset 0 0 0 7px #1e8cbe;
806 .attachment-preview {
809 inset 0 0 15px rgba( 0, 0, 0, 0.1 ),
810 inset 0 0 0 1px rgba( 0, 0, 0, 0.05 );
812 inset 0 0 15px rgba( 0, 0, 0, 0.1 ),
813 inset 0 0 0 1px rgba( 0, 0, 0, 0.05 );
818 .attachment-preview:before {
829 .attachment .thumbnail {
837 -webkit-transition: opacity .1s;
838 transition: opacity .1s;
841 .attachment .portrait img {
845 .attachment .landscape img {
849 .attachment .thumbnail:after {
857 -webkit-box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
858 box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
863 .attachment .thumbnail img {
869 .attachment .thumbnail .centered {
875 -webkit-transform: translate( 50%, 50% );
876 -ms-transform: translate(50%,50%); /* Fails with spaces?? Weird! */
877 transform: translate( 50%, 50% );
880 .attachment .thumbnail .centered img {
881 -webkit-transform: translate( -50%, -50% );
882 -ms-transform: translate(-50%,-50%);
883 transform: translate( -50%, -50% );
886 .attachment .thumbnail .centered img.icon {
887 -webkit-transform: translate( -50%, -70% );
888 -ms-transform: translate(-50%,-70%);
889 transform: translate( -50%, -70% );
892 .ie8 .attachment img.icon {
897 .attachment .filename {
904 word-wrap: break-word;
907 background: rgba( 255, 255, 255, 0.8 );
908 -webkit-box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
909 box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
912 .attachment .filename div {
916 .attachment .thumbnail img {
931 text-decoration: none;
933 background-color: #fff;
934 background-position: -96px 4px;
936 -webkit-border-radius: 3px;
938 -webkit-box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.3 );
939 box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.3 );
942 .attachment .close:hover {
943 -webkit-box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.6 );
944 box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.6 );
947 .attachment:hover .close {
961 -webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba( 0, 0, 0, 0.15 );
962 box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba( 0, 0, 0, 0.15 );
965 .attachment .check div {
966 background-position: -1px 0;
972 .attachment .check:hover div {
973 background-position: -40px 0;
976 .attachment.selected .check {
980 .attachment.details .check,
981 .attachment.selected .check:focus,
982 .media-frame.mode-grid .attachment.selected .check {
983 background-color: #1e8cbe;
992 .attachment.details .check div,
993 .media-frame.mode-grid .attachment.selected .check div {
994 background-position: -21px 0;
997 .attachment.details .check:hover div,
998 .attachment.selected .check:focus div,
999 .media-frame.mode-grid .attachment.selected .check:hover div {
1000 background-position: -60px 0;
1003 .media-frame .attachment .describe {
1010 -webkit-border-radius: 0;
1015 * Attachments Browser
1017 .media-frame .attachments-browser {
1024 .attachments-browser .media-toolbar {
1029 .attachments-browser.hide-sidebar .media-toolbar {
1033 .attachments-browser .media-toolbar-primary > .media-button,
1034 .attachments-browser .media-toolbar-primary > .media-button-group,
1035 .attachments-browser .media-toolbar-secondary > .media-button,
1036 .attachments-browser .media-toolbar-secondary > .media-button-group {
1040 .attachments-browser .attachments {
1041 padding: 2px 8px 8px;
1044 .attachments-browser .attachments,
1045 .attachments-browser .uploader-inline {
1055 .attachments-browser .uploader-inline.hidden {
1059 .uploader-inline .close {
1060 background-color: transparent;
1072 .uploader-inline .close:before {
1073 font: normal 30px/50px 'dashicons' !important;
1075 display: inline-block;
1080 .attachments-browser.hide-sidebar .attachments,
1081 .attachments-browser.hide-sidebar .uploader-inline {
1086 .attachments-browser .instructions {
1087 display: inline-block;
1095 .attachments-browser .no-media {
1096 padding: 2em 2em 0 0;
1102 .media-progress-bar {
1107 -webkit-border-radius: 10px;
1108 border-radius: 10px;
1109 background: #dfdfdf;
1110 background: rgba( 0, 0, 0, 0.1 );
1113 .media-progress-bar div {
1117 background: #1e8cbe;
1118 -webkit-border-radius: 10px;
1119 border-radius: 10px;
1120 -webkit-transition: width 300ms;
1121 transition: width 300ms;
1124 .media-uploader-status .media-progress-bar {
1129 .uploading.media-uploader-status .media-progress-bar {
1133 .attachment-preview .media-progress-bar {
1141 .media-uploader-status {
1144 padding-bottom: 10px;
1148 .media-sidebar .media-uploader-status {
1149 border-bottom: 1px solid #dfdfdf;
1152 .uploader-inline .media-uploader-status h3 {
1156 .media-uploader-status .upload-details {
1162 .uploading.media-uploader-status .upload-details {
1166 .media-uploader-status .upload-detail-separator {
1170 .media-uploader-status .upload-count {
1174 .media-uploader-status .upload-dismiss-errors,
1175 .media-uploader-status .upload-errors {
1179 .errors.media-uploader-status .upload-dismiss-errors,
1180 .errors.media-uploader-status .upload-errors {
1184 .media-uploader-status .upload-dismiss-errors {
1185 text-decoration: none;
1188 .media-sidebar .media-uploader-status .upload-dismiss-errors {
1194 .upload-errors .upload-error {
1195 margin: 8px auto 0 auto;
1197 border: 1px #c00 solid;
1198 background: #ffebe8;
1199 -webkit-border-radius: 3px;
1203 .upload-errors .upload-error-label {
1209 background-image: -webkit-gradient(linear, right top, right bottom, from(#e00), to(#a00));
1210 background-image: -webkit-linear-gradient(top, #e00, #a00);
1211 background-image: linear-gradient(to bottom, #e00, #a00);
1212 -webkit-border-radius: 3px;
1216 .upload-errors .upload-error-message {
1220 word-wrap: break-word;
1229 background: rgba( 0, 86, 132, 0.9 );
1234 -webkit-transition: opacity 250ms;
1235 transition: opacity 250ms;
1238 .uploader-window-content {
1244 border: 1px dashed #fff;
1247 .uploader-window h3 {
1253 -webkit-transform: translateY( -50% );
1254 -ms-transform: translateY(-50%);
1255 transform: translateY( -50% );
1261 .uploader-window .media-progress-bar {
1264 background: transparent;
1269 .uploader-window .media-progress-bar div {
1273 .uploading .uploader-window .media-progress-bar {
1277 .media-frame .uploader-inline {
1278 margin-bottom: 20px;
1283 .uploader-inline-content {
1290 .uploader-inline-content .upload-ui {
1294 .uploader-inline-content .post-upload-ui {
1298 .uploader-inline .has-upload-message .upload-ui {
1302 .uploader-inline h3 {
1309 .uploader-inline .has-upload-message .upload-instructions {
1312 font-weight: normal;
1315 .uploader-inline .drop-instructions {
1319 .supports-drag-drop .uploader-inline .drop-instructions {
1323 .uploader-inline p {
1328 .uploader-inline .media-progress-bar {
1332 .uploading.uploader-inline .media-progress-bar {
1336 .uploader-inline .browser {
1337 display: inline-block !important;
1349 padding: 0 16px 0 0;
1351 white-space: nowrap;
1354 .media-selection .selection-info {
1355 display: inline-block;
1359 vertical-align: top;
1362 .media-selection.empty,
1363 .media-selection.editing {
1367 .media-selection.one .edit-selection {
1371 .media-selection .count {
1379 .media-selection .selection-info a {
1383 margin: 1px -8px 1px 8px;
1385 text-decoration: none;
1386 border-left: 1px solid #dfdfdf;
1390 .media-selection .selection-info a:hover {
1391 background: #21759B;
1393 border-color: transparent;
1396 .media-selection .selection-info a:last-child {
1401 .media-selection .selection-info .clear-selection {
1405 .media-selection .selection-info .clear-selection:hover {
1409 .media-selection .selection-view {
1410 display: inline-block;
1411 vertical-align: top;
1414 .media-selection .attachments {
1415 display: inline-block;
1420 vertical-align: top;
1423 .media-selection .attachment {
1427 -webkit-box-shadow: none;
1431 .media-selection .attachment .thumbnail {
1438 .media-selection .attachment .icon {
1442 .media-selection .attachment-preview {
1443 -webkit-box-shadow: none;
1448 .media-selection .attachment.selection.details .thumbnail {
1457 .media-selection:after {
1465 background-image: -webkit-gradient(linear, left top, right top, from(rgba( 255, 255, 255, 1 )), to(rgba( 255, 255, 255, 0 )));
1466 background-image: -webkit-linear-gradient(left, rgba( 255, 255, 255, 1 ), rgba( 255, 255, 255, 0 ));
1467 background-image: linear-gradient(to right, rgba( 255, 255, 255, 1 ) , rgba( 255, 255, 255, 0 ) );
1470 .media-selection .attachment .filename {
1477 .media-frame .spinner {
1478 background: url(../images/spinner.gif) no-repeat;
1479 -webkit-background-size: 20px 20px;
1480 background-size: 20px 20px;
1483 filter: alpha(opacity=70);
1489 .media-toolbar .spinner {
1494 * Attachment Details
1496 .attachment-details {
1501 .attachment-details .settings-save-status {
1503 text-transform: none;
1507 .attachment-details .settings-save-status .spinner {
1511 .attachment-details .settings-save-status .saved {
1516 .attachment-details.save-waiting .settings-save-status .spinner,
1517 .attachment-details.save-complete .settings-save-status .saved {
1524 margin-bottom: 16px;
1527 border-bottom: 1px solid #ddd;
1528 padding-bottom: 11px;
1531 .attachment-info .filename {
1534 word-wrap: break-word;
1537 .attachment-info .thumbnail {
1547 .uploading .attachment-info .thumbnail {
1550 -webkit-box-shadow: inset 0 0 15px rgba( 0, 0, 0, 0.1 );
1551 box-shadow: inset 0 0 15px rgba( 0, 0, 0, 0.1 );
1554 .uploading .attachment-info .media-progress-bar {
1558 .attachment-info .thumbnail-image:after {
1566 -webkit-box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
1567 box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
1571 .attachment-info .thumbnail img {
1578 .attachment-info .details {
1584 .attachment-info .edit-attachment,
1585 .attachment-info .refresh-attachment,
1586 .attachment-info .delete-attachment,
1587 .attachment-info .trash-attachment,
1588 .attachment-info .untrash-attachment {
1590 text-decoration: none;
1591 white-space: nowrap;
1594 .attachment-info .refresh-attachment,
1595 .attachment-details.needs-refresh .attachment-info .edit-attachment {
1599 .attachment-details.needs-refresh .attachment-info .refresh-attachment,
1600 .attachment-info .edit-attachment {
1604 .media-modal .delete-attachment,
1605 .media-modal .trash-attachment,
1606 .media-modal .untrash-attachment {
1610 .media-modal .delete-attachment:hover,
1611 .media-modal .trash-attachment:hover,
1612 .media-modal .untrash-attachment:hover {
1617 * Attachment Display Settings
1619 .attachment-display-settings {
1625 .attachment-display-settings h4 {
1626 margin: 1.4em 0 0.4em;
1629 .collection-settings {
1633 .collection-settings .setting input[type="checkbox"] {
1638 .collection-settings .setting span {
1645 .media-modal .imgedit-wrap {
1649 .media-modal .imgedit-wait {
1650 height: auto !important;
1656 .media-modal .imgedit-wrap .imgedit-panel-content {
1666 .media-modal .imgedit-wrap .imgedit-settings {
1667 background: #f3f3f3;
1668 border-right: 1px solid #ddd;
1669 padding: 0 16px 16px;
1678 .media-modal .imgedit-group {
1681 border-bottom: 1px solid #ddd;
1682 -webkit-box-shadow: none;
1685 margin-bottom: 16px;
1687 padding-bottom: 16px;
1688 position: relative; /* RTL fix, #WP29352 */
1691 .media-modal .imgedit-group:last-of-type {
1697 .media-modal .imgedit-group-top h3 {
1698 text-transform: uppercase;
1705 .media-modal .imgedit-group-top h3 a {
1706 text-decoration: none;
1710 .media-modal .imgedit-help-toggle {
1716 .media-modal .imgedit-help-toggled span.dashicons:before {
1720 .media-modal .imgedit-group img {
1724 .media-modal .imgedit-wrap div.updated {
1726 margin-bottom: 16px;
1731 * Embed from URL and Image Details
1743 .media-frame .embed-url input {
1748 -webkit-box-shadow: inset 2px 2px 4px -2px rgba( 0, 0, 0, 0.1 );
1749 box-shadow: inset 2px 2px 4px -2px rgba( 0, 0, 0, 0.1 );
1752 .media-frame .embed-url .spinner {
1758 .media-frame .embed-loading .embed-url .spinner {
1762 .embed-link-settings,
1763 .embed-media-settings {
1769 padding: 16px 16px 32px;
1773 .embed-preview img, .embed-preview iframe, .embed-preview embed {
1777 .embed-preview img {
1781 .image-details .media-modal {
1786 .image-details .media-frame-title,
1787 .image-details .media-frame-content,
1788 .image-details .media-frame-router {
1792 .image-details .embed-media-settings {
1798 .image-details .embed-media-settings,
1799 .image-details .embed-media-settings div {
1800 -webkit-box-sizing: border-box;
1801 -moz-box-sizing: border-box;
1802 box-sizing: border-box;
1805 .image-details .column-settings {
1806 background: #f3f3f3;
1807 border-left: 1px solid #ddd;
1815 .image-details .column-settings h3 {
1818 border-top: 1px solid #ddd;
1821 .image-details .column-image {
1828 .image-details .image {
1832 .image-details .image img {
1837 .image-details .advanced-toggle {
1839 text-decoration: none;
1843 .image-details .advanced-toggle:after {
1844 font: normal 20px/1 'dashicons';
1846 vertical-align: top;
1847 -webkit-font-smoothing: antialiased;
1848 -moz-osx-font-smoothing: grayscale;
1850 display: inline-block;
1854 .image-details .advanced-visible .advanced-toggle:after {
1858 .image-details .embed-media-settings .size {
1862 .image-details .custom-size span {
1866 .image-details .custom-size label {
1871 .image-details .custom-size span small {
1876 .image-details .custom-size input {
1880 .image-details .custom-size .sep {
1882 margin: 26px 6px 0 6px;
1885 .image-details .custom-size:after {
1891 .media-embed .thumbnail {
1898 .media-embed .thumbnail img {
1903 .media-embed .thumbnail:after {
1911 -webkit-box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
1912 box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
1916 .media-embed .setting {
1924 .image-details .embed-media-settings .setting {
1929 .image-details .actions {
1933 .image-details .hidden {
1937 .media-embed .setting input[type="text"],
1938 .media-embed .setting textarea {
1945 .image-details .embed-media-settings .setting input[type="text"],
1946 .image-details .embed-media-settings .setting textarea {
1951 .image-details .embed-media-settings .setting input.link-to-custom,
1952 .image-details .embed-media-settings .link-target,
1953 .image-details .embed-media-settings .custom-size {
1958 .image-details .embed-media-settings .link-target {
1962 .media-embed .setting input.hidden,
1963 .media-embed .setting textarea.hidden {
1967 .media-embed .setting span {
1975 .image-details .embed-media-settings .setting span {
1979 margin: 8px 1% 0 1%;
1983 .media-embed .setting .button-group {
1987 .media-embed-sidebar {
1998 /* Drag & drop on the editor upload */
1999 #wp-fullscreen-body .uploader-editor,
2000 .wp-editor-wrap .uploader-editor {
2001 background: rgba( 150, 150, 150, 0.9 );
2007 z-index: 99998; /* under the toolbar */
2012 #wp-fullscreen-body .uploader-editor {
2013 background: rgba( 0, 86, 132, 0.9 );
2015 z-index: 100050; /* above the editor toolbar */
2018 .wp-editor-wrap.wp-fullscreen-wrap .uploader-editor {
2022 #wp-fullscreen-body .uploader-editor-content,
2023 .wp-editor-wrap .uploader-editor-content {
2024 border: 1px dashed #fff;
2032 #wp-fullscreen-body .uploader-editor .uploader-editor-title,
2033 .wp-editor-wrap .uploader-editor .uploader-editor-title {
2038 -webkit-transform: translateY( -50% );
2039 -ms-transform: translateY(-50%);
2040 transform: translateY( -50% );
2050 .wp-editor-wrap .uploader-editor.droppable {
2051 background: rgba( 0, 86, 132, 0.9 );
2054 #wp-fullscreen-body .uploader-editor .uploader-editor-title,
2055 .wp-editor-wrap .uploader-editor.droppable .uploader-editor-title {
2062 .ie7 .media-frame .attachments-browser {
2066 .ie7 .media-frame .embed-url input {
2075 .ie7 .attachment-display-settings {
2079 .ie7 .attachment-preview,
2080 .ie7 .attachment-preview .thumbnail {
2085 .ie7 .media-frame .attachment .describe {
2089 .ie7 .media-sidebar .setting select {
2093 .ie7 .media-sidebar .setting input[type="text"],
2094 .ie7 .media-sidebar .setting input[type="password"],
2095 .ie7 .media-sidebar .setting input[type="email"],
2096 .ie7 .media-sidebar .setting input[type="number"],
2097 .ie7 .media-sidebar .setting input[type="search"],
2098 .ie7 .media-sidebar .setting input[type="tel"],
2099 .ie7 .media-sidebar .setting input[type="url"],
2100 .ie7 .media-sidebar .setting textarea {
2104 .ie7 .media-sidebar .setting .link-to-custom {
2113 .rtl .media-frame .search,
2114 .rtl .media-frame input[type="text"],
2115 .rtl .media-frame input[type="password"],
2116 .rtl .media-frame input[type="number"],
2117 .rtl .media-frame input[type="search"],
2118 .rtl .media-frame input[type="email"],
2119 .rtl .media-frame input[type="url"],
2120 .rtl .media-frame input[type="tel"],
2121 .rtl .media-frame textarea,
2122 .rtl .media-frame select {
2123 font-family: Tahoma, sans-serif;
2126 :lang(he-il) .rtl .media-modal,
2127 :lang(he-il) .rtl .media-frame,
2128 :lang(he-il) .rtl .media-frame .search,
2129 :lang(he-il) .rtl .media-frame input[type="text"],
2130 :lang(he-il) .rtl .media-frame input[type="password"],
2131 :lang(he-il) .rtl .media-frame input[type="number"],
2132 :lang(he-il) .rtl .media-frame input[type="search"],
2133 :lang(he-il) .rtl .media-frame input[type="email"],
2134 :lang(he-il) .rtl .media-frame input[type="url"],
2135 :lang(he-il) .rtl .media-frame textarea,
2136 :lang(he-il) .rtl .media-frame select {
2137 font-family: Arial, sans-serif;
2140 @media only screen and (max-width: 940px) {
2141 .media-frame-content .media-toolbar-primary .search,
2142 .media-frame-content .media-toolbar-secondary .attachment-filters {
2150 @media only screen and (max-width: 900px) {
2152 /* Drop-down menu */
2153 .media-frame:not(.hide-menu) .media-frame-title,
2154 .media-frame:not(.hide-menu) .media-frame-router,
2155 .media-frame:not(.hide-menu) .media-frame-content,
2156 .media-frame:not(.hide-menu) .media-frame-toolbar {
2160 .media-frame:not(.hide-menu) .media-frame-menu {
2165 .media-frame:not(.hide-menu) .media-menu {
2175 border: 1px solid #ccc;
2178 .media-frame:not(.hide-menu) .media-menu.visible {
2182 .media-frame:not(.hide-menu) .media-menu > a {
2187 .media-frame:not(.hide-menu) .media-menu > a.active {
2191 .media-frame:not(.hide-menu) .media-menu .separator {
2195 .media-frame:not(.hide-menu) .media-frame-title {
2200 .media-frame:not(.hide-menu) .media-frame-title .dashicons {
2201 display: inline-block;
2205 .media-frame:not(.hide-menu) .media-frame-title h1 {
2211 /* End drop-down menu */
2217 .attachments-browser .attachments,
2218 .attachments-browser .uploader-inline,
2219 .attachments-browser .media-toolbar {
2223 .media-sidebar .setting,
2224 .attachment-details .setting {
2228 .media-sidebar .setting input,
2229 .media-sidebar .setting textarea,
2230 .media-sidebar .setting span,
2231 .attachment-details .setting input,
2232 .attachment-details .setting textarea,
2233 .attachment-details .setting span,
2234 .compat-item label span {
2238 .media-sidebar .setting span,
2239 .attachment-details .setting span,
2240 .compat-item label span {
2241 text-align: inherit;
2247 .media-sidebar .setting .value,
2248 .attachment-details .setting .value {
2253 .media-sidebar .setting input[type="text"],
2254 .media-sidebar .setting input[type="password"],
2255 .media-sidebar .setting input[type="email"],
2256 .media-sidebar .setting input[type="number"],
2257 .media-sidebar .setting input[type="search"],
2258 .media-sidebar .setting input[type="tel"],
2259 .media-sidebar .setting input[type="url"],
2260 .media-sidebar .setting textarea,
2261 .media-sidebar .setting select,
2262 .attachment-details .setting input[type="text"],
2263 .attachment-details .setting input[type="password"],
2264 .attachment-details .setting input[type="email"],
2265 .attachment-details .setting input[type="number"],
2266 .attachment-details .setting input[type="search"],
2267 .attachment-details .setting input[type="tel"],
2268 .attachment-details .setting input[type="url"],
2269 .attachment-details .setting textarea,
2270 .attachment-details .setting select {
2277 .media-sidebar .setting select.columns,
2278 .attachment-details .setting select.columns {
2283 .media-frame textarea,
2284 .media-frame .search {
2288 .image-details .column-image {
2293 .image-details .column-settings {
2297 .image-details .media-modal {
2302 .image-details .embed-media-settings .setting {
2306 .image-details .embed-media-settings .setting span {
2313 .image-details .embed-media-settings .setting input.link-to-custom,
2314 .image-details .embed-media-settings .setting input[type="text"],
2315 .image-details .embed-media-settings .setting textarea {
2320 .image-details .embed-media-settings .custom-size {
2324 .collection-settings .setting input[type="checkbox"] {
2332 .media-selection:after {
2336 .media-selection .attachments {
2340 .media-modal .attachments-browser .media-toolbar-primary,
2341 .media-modal .attachments-browser .media-toolbar-secondary {
2345 .media-modal .attachments-browser .media-toolbar .search {
2351 .media-modal .attachments-browser .media-toolbar .attachment-filters {
2355 max-width: -webkit-calc(100% - 38px);
2356 max-width: calc(100% - 38px);
2359 .media-modal .attachments-browser .media-toolbar .spinner {
2363 /* Text inputs need to be 16px, or they force zooming on iOS */
2364 .media-frame input[type="text"],
2365 .media-frame input[type="password"],
2366 .media-frame input[type="number"],
2367 .media-frame input[type="search"],
2368 .media-frame input[type="email"],
2369 .media-frame input[type="url"],
2370 .media-frame textarea,
2371 .media-frame select {
2376 /* Responsive on portrait and landscape */
2377 @media only screen and (max-width: 640px), screen and (max-height: 400px) {
2378 /* Full-bleed modal */
2380 .image-details .media-modal {
2388 .media-modal-backdrop {
2396 -webkit-box-sizing: border-box;
2397 -moz-box-sizing: border-box;
2398 box-sizing: border-box;
2402 .media-sidebar.visible {
2406 .attachments-browser .attachments,
2407 .attachments-browser .uploader-inline,
2408 .attachments-browser .media-toolbar {
2412 .image-details .media-frame-title {
2418 .image-details .column-image,
2419 .image-details .column-settings {
2425 .image-details .column-settings {
2429 /* Media tabs on the top */
2430 .media-frame-content .media-toolbar .instructions {
2435 /* Landscape specific header override */
2436 @media screen and (max-height: 400px) {
2441 .media-frame-router {
2445 .media-frame-content {
2449 .attachments-browser .attachments {
2453 /* Prevent unnecessary scrolling on title input */
2454 .embed-link-settings {
2459 @media only screen and (max-width: 480px) {
2460 .media-frame-content .media-toolbar .search,
2461 .media-frame-content .media-toolbar .attachment-filters {
2465 .media-modal-close {
2470 .media-modal .media-frame-title {
2474 .media-modal .media-frame-title h1,
2475 .media-frame:not(.hide-menu) .media-frame-title h1 {
2480 .media-frame:not(.hide-menu) .media-frame-title .dashicons {
2484 .media-frame-router,
2485 .media-frame:not(.hide-menu) .media-menu {
2489 .media-frame-content {
2493 .media-frame.hide-router .media-frame-content {
2502 (-o-min-device-pixel-ratio: 5/4),
2503 (-webkit-min-device-pixel-ratio: 1.25),
2504 (min-resolution: 120dpi) {
2507 background-image: url(../images/uploader-icons-2x.png);
2508 -webkit-background-size: 134px 15px;
2509 background-size: 134px 15px;
2512 .media-frame .spinner {
2513 background-image: url(../images/spinner-2x.gif);
2517 .media-frame-content[data-columns="1"] .attachment {
2521 .media-frame-content[data-columns="2"] .attachment {
2525 .media-frame-content[data-columns="3"] .attachment {
2529 .media-frame-content[data-columns="4"] .attachment {
2533 .media-frame-content[data-columns="5"] .attachment {
2537 .media-frame-content[data-columns="6"] .attachment {
2541 .media-frame-content[data-columns="7"] .attachment {
2545 .media-frame-content[data-columns="8"] .attachment {
2549 .media-frame-content[data-columns="9"] .attachment {
2553 .media-frame-content[data-columns="10"] .attachment {
2557 .media-frame-content[data-columns="11"] .attachment {
2561 .media-frame-content[data-columns="12"] .attachment {