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 {
108 * jQuery UI Draggable/Sortable 1.11.2
109 * http://jqueryui.com
111 * Copyright 2014 jQuery Foundation and other contributors
112 * Released under the MIT license.
113 * http://jquery.org/license
115 .ui-draggable-handle,
116 .ui-sortable-handle {
117 -ms-touch-action: none;
133 .wp-customizer .media-modal {
137 .media-modal-backdrop {
149 .wp-customizer .media-modal-backdrop {
155 text-decoration: none;
161 -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
162 transition: color .1s ease-in-out, background .1s ease-in-out;
165 .media-modal-close:active {
166 -webkit-box-shadow: none;
170 .media-modal-close span.media-modal-icon {
175 background-image: none;
179 .media-modal-close .media-modal-icon:before {
181 font: normal 20px/1 'dashicons';
183 vertical-align: middle;
184 -webkit-font-smoothing: antialiased;
185 -moz-osx-font-smoothing: grayscale;
189 .media-modal-close:hover .media-modal-icon:before {
193 .media-modal-close:active {
197 .media-modal-content {
205 -webkit-box-shadow: 0 5px 15px rgba(0,0,0,0.7);
206 box-shadow: 0 5px 15px rgba(0,0,0,0.7);
208 -webkit-font-smoothing: subpixel-antialiased;
212 background-image: url(../images/uploader-icons.png);
213 background-repeat: no-repeat;
227 border: 0 solid #dfdfdf;
231 .media-toolbar-primary {
237 .media-toolbar-secondary {
243 .media-toolbar-primary > .media-button,
244 .media-toolbar-primary > .media-button-group {
250 .media-toolbar-secondary > .media-button,
251 .media-toolbar-secondary > .media-button-group {
265 padding: 0 16px 24px;
268 border-right: 1px solid #ddd;
270 -webkit-overflow-scrolling: touch;
273 .hide-toolbar .media-sidebar {
277 .media-sidebar .sidebar-title {
280 padding: 12px 10px 10px;
284 .media-sidebar .sidebar-content {
286 margin-bottom: 130px;
289 .media-sidebar .search {
298 text-transform: uppercase;
304 .media-sidebar .setting,
305 .attachment-details .setting {
312 .media-sidebar .setting label,
313 .attachment-details .setting label {
317 .media-sidebar .setting .link-to-custom,
318 .attachment-details .setting .link-to-custom {
322 .media-sidebar .setting span,
323 .attachment-details .setting span {
328 word-wrap: break-word;
331 .media-sidebar .setting .name {
335 .media-sidebar .setting select,
336 .attachment-details .setting select {
340 .media-sidebar .setting input[type="checkbox"],
341 .media-sidebar .field input[type="checkbox"],
342 .media-sidebar .setting input[type="radio"],
343 .media-sidebar .field input[type="radio"],
344 .attachment-details .setting input[type="checkbox"],
345 .attachment-details .field input[type="checkbox"],
346 .attachment-details .setting input[type="radio"],
347 .attachment-details .field input[type="radio"] {
353 .media-sidebar .setting span,
354 .attachment-details .setting span,
355 .compat-item label span {
364 .compat-item label span {
368 .media-sidebar .setting input[type="text"],
369 .media-sidebar .setting input[type="password"],
370 .media-sidebar .setting input[type="email"],
371 .media-sidebar .setting input[type="number"],
372 .media-sidebar .setting input[type="search"],
373 .media-sidebar .setting input[type="tel"],
374 .media-sidebar .setting input[type="url"],
375 .media-sidebar .setting textarea,
376 .media-sidebar .setting .value,
377 .attachment-details .setting input[type="text"],
378 .attachment-details .setting input[type="password"],
379 .attachment-details .setting input[type="email"],
380 .attachment-details .setting input[type="number"],
381 .attachment-details .setting input[type="search"],
382 .attachment-details .setting input[type="tel"],
383 .attachment-details .setting input[type="url"],
384 .attachment-details .setting textarea,
385 .attachment-details .setting .value {
386 -webkit-box-sizing: border-box;
387 -moz-box-sizing: border-box;
388 box-sizing: border-box;
394 .media-sidebar .setting .value,
395 .attachment-details .setting .value {
400 .media-sidebar .setting textarea,
401 .attachment-details .setting textarea,
402 .compat-item .field textarea {
407 .media-sidebar select,
408 .attachment-details select {
432 .compat-item .field {
438 .compat-item .label {
445 .compat-item .label span {
450 .compat-item .field {
455 .compat-item .field input[type="text"],
456 .compat-item .field input[type="password"],
457 .compat-item .field input[type="email"],
458 .compat-item .field input[type="number"],
459 .compat-item .field input[type="search"],
460 .compat-item .field input[type="tel"],
461 .compat-item .field input[type="url"] {
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 .media-frame-content .crop-content .crop-image {
706 .media-frame-content .crop-content .upload-errors
712 margin-right: -150px;
720 .media-frame .media-iframe {
724 .media-frame .media-iframe,
725 .media-frame .media-iframe iframe {
732 * Attachment Browser Filters
734 .media-frame select.attachment-filters {
743 .media-frame .search {
748 font-family: "Open Sans", sans-serif;
749 -webkit-appearance: none;
752 .media-toolbar-primary .search {
761 -webkit-overflow-scrolling: touch;
776 -webkit-user-select: none;
777 -moz-user-select: none;
778 -ms-user-select: none;
781 -webkit-box-sizing: border-box;
782 -moz-box-sizing: border-box;
783 box-sizing: border-box;
787 .selected.attachment:focus,
788 .attachment.details:focus {
790 inset 0 0 2px 3px #fff,
791 inset 0 0 0 7px #5b9dd9;
793 inset 0 0 2px 3px #fff,
794 inset 0 0 0 7px #5b9dd9;
798 .selected.attachment {
800 inset 0 0 0 5px #fff,
801 inset 0 0 0 7px #ccc;
803 inset 0 0 0 5px #fff,
804 inset 0 0 0 7px #ccc;
807 .attachment.details {
809 inset 0 0 0 3px #fff,
810 inset 0 0 0 7px #1e8cbe;
812 inset 0 0 0 3px #fff,
813 inset 0 0 0 7px #1e8cbe;
816 .attachment-preview {
819 inset 0 0 15px rgba( 0, 0, 0, 0.1 ),
820 inset 0 0 0 1px rgba( 0, 0, 0, 0.05 );
822 inset 0 0 15px rgba( 0, 0, 0, 0.1 ),
823 inset 0 0 0 1px rgba( 0, 0, 0, 0.05 );
828 .attachment-preview:before {
839 .attachment .thumbnail {
847 -webkit-transition: opacity .1s;
848 transition: opacity .1s;
851 .attachment .portrait img {
855 .attachment .landscape img {
859 .attachment .thumbnail:after {
867 -webkit-box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
868 box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
873 .attachment .thumbnail img {
879 .attachment .thumbnail .centered {
885 -webkit-transform: translate( 50%, 50% );
886 -ms-transform: translate(50%,50%); /* Fails with spaces?? Weird! */
887 transform: translate( 50%, 50% );
890 .attachment .thumbnail .centered img {
891 -webkit-transform: translate( -50%, -50% );
892 -ms-transform: translate(-50%,-50%);
893 transform: translate( -50%, -50% );
896 .attachment .thumbnail .centered img.icon {
897 -webkit-transform: translate( -50%, -70% );
898 -ms-transform: translate(-50%,-70%);
899 transform: translate( -50%, -70% );
902 .ie8 .attachment img.icon {
907 .attachment .filename {
914 word-wrap: break-word;
917 background: rgba( 255, 255, 255, 0.8 );
918 -webkit-box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
919 box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
922 .attachment .filename div {
926 .attachment .thumbnail img {
941 text-decoration: none;
943 background-color: #fff;
944 background-position: -96px 4px;
946 -webkit-border-radius: 3px;
948 -webkit-box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.3 );
949 box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.3 );
950 -webkit-transition-duration: none;
951 transition-duration: none;
952 -webkit-transition-property: none;
953 transition-property: none;
956 .attachment a.close:hover,
957 .attachment a.close:focus {
958 -webkit-box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.6 );
959 box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.6 );
960 background-position: -36px 4px;
974 -webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba( 0, 0, 0, 0.15 );
975 box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba( 0, 0, 0, 0.15 );
978 .attachment .check div {
979 background-position: -1px 0;
985 .attachment .check:hover div {
986 background-position: -40px 0;
989 .attachment.selected .check {
993 .attachment.details .check,
994 .attachment.selected .check:focus,
995 .media-frame.mode-grid .attachment.selected .check {
996 background-color: #1e8cbe;
1005 .attachment.details .check div,
1006 .media-frame.mode-grid .attachment.selected .check div {
1007 background-position: -21px 0;
1010 .attachment.details .check:hover div,
1011 .attachment.selected .check:focus div,
1012 .media-frame.mode-grid .attachment.selected .check:hover div {
1013 background-position: -60px 0;
1016 .media-frame .attachment .describe {
1023 -webkit-border-radius: 0;
1028 * Attachments Browser
1030 .media-frame .attachments-browser {
1037 .attachments-browser .media-toolbar {
1042 .attachments-browser.hide-sidebar .media-toolbar {
1046 .attachments-browser .media-toolbar-primary > .media-button,
1047 .attachments-browser .media-toolbar-primary > .media-button-group,
1048 .attachments-browser .media-toolbar-secondary > .media-button,
1049 .attachments-browser .media-toolbar-secondary > .media-button-group {
1053 .attachments-browser .attachments {
1054 padding: 2px 8px 8px;
1057 .attachments-browser .attachments,
1058 .attachments-browser .uploader-inline {
1068 .attachments-browser .uploader-inline.hidden {
1072 .uploader-inline .close {
1073 background-color: transparent;
1085 .uploader-inline .close:before {
1086 font: normal 30px/50px 'dashicons' !important;
1088 display: inline-block;
1093 .attachments-browser.hide-sidebar .attachments,
1094 .attachments-browser.hide-sidebar .uploader-inline {
1099 .attachments-browser .instructions {
1100 display: inline-block;
1108 .attachments-browser .no-media {
1109 padding: 2em 2em 0 0;
1115 .media-progress-bar {
1120 -webkit-border-radius: 10px;
1121 border-radius: 10px;
1122 background: #dfdfdf;
1123 background: rgba( 0, 0, 0, 0.1 );
1126 .media-progress-bar div {
1130 background: #1e8cbe;
1131 -webkit-border-radius: 10px;
1132 border-radius: 10px;
1133 -webkit-transition: width 300ms;
1134 transition: width 300ms;
1137 .media-uploader-status .media-progress-bar {
1142 .uploading.media-uploader-status .media-progress-bar {
1146 .attachment-preview .media-progress-bar {
1154 .media-uploader-status {
1157 padding-bottom: 10px;
1161 .media-sidebar .media-uploader-status {
1162 border-bottom: 1px solid #dfdfdf;
1165 .uploader-inline .media-uploader-status h3 {
1169 .media-uploader-status .upload-details {
1175 .uploading.media-uploader-status .upload-details {
1179 .media-uploader-status .upload-detail-separator {
1183 .media-uploader-status .upload-count {
1187 .media-uploader-status .upload-dismiss-errors,
1188 .media-uploader-status .upload-errors {
1192 .errors.media-uploader-status .upload-dismiss-errors,
1193 .errors.media-uploader-status .upload-errors {
1197 .media-uploader-status .upload-dismiss-errors {
1198 text-decoration: none;
1201 .media-sidebar .media-uploader-status .upload-dismiss-errors {
1207 .upload-errors .upload-error {
1208 margin: 8px auto 0 auto;
1210 border: 1px #c00 solid;
1211 background: #ffebe8;
1212 -webkit-border-radius: 3px;
1216 .upload-errors .upload-error-label {
1222 background-image: -webkit-gradient(linear, right top, right bottom, from(#e00), to(#a00));
1223 background-image: -webkit-linear-gradient(top, #e00, #a00);
1224 background-image: linear-gradient(to bottom, #e00, #a00);
1225 -webkit-border-radius: 3px;
1229 .upload-errors .upload-error-message {
1233 word-wrap: break-word;
1242 background: rgba( 0, 86, 132, 0.9 );
1247 -webkit-transition: opacity 250ms;
1248 transition: opacity 250ms;
1251 .uploader-window-content {
1257 border: 1px dashed #fff;
1260 .uploader-window h3 {
1266 -webkit-transform: translateY( -50% );
1267 -ms-transform: translateY(-50%);
1268 transform: translateY( -50% );
1274 .uploader-window .media-progress-bar {
1277 background: transparent;
1282 .uploader-window .media-progress-bar div {
1286 .uploading .uploader-window .media-progress-bar {
1290 .media-frame .uploader-inline {
1291 margin-bottom: 20px;
1296 .uploader-inline-content {
1303 .uploader-inline-content .upload-ui {
1307 .uploader-inline-content .post-upload-ui {
1311 .uploader-inline .has-upload-message .upload-ui {
1315 .uploader-inline h3 {
1322 .uploader-inline .has-upload-message .upload-instructions {
1325 font-weight: normal;
1328 .uploader-inline .drop-instructions {
1332 .supports-drag-drop .uploader-inline .drop-instructions {
1336 .uploader-inline p {
1341 .uploader-inline .media-progress-bar {
1345 .uploading.uploader-inline .media-progress-bar {
1349 .uploader-inline .browser {
1350 display: inline-block !important;
1362 padding: 0 16px 0 0;
1364 white-space: nowrap;
1367 .media-selection .selection-info {
1368 display: inline-block;
1372 vertical-align: top;
1375 .media-selection.empty,
1376 .media-selection.editing {
1380 .media-selection.one .edit-selection {
1384 .media-selection .count {
1392 .media-selection .selection-info a {
1396 margin: 1px -8px 1px 8px;
1398 text-decoration: none;
1399 border-left: 1px solid #dfdfdf;
1403 .media-selection .selection-info a:hover {
1404 background: #21759B;
1406 border-color: transparent;
1409 .media-selection .selection-info a:last-child {
1414 .media-selection .selection-info .clear-selection {
1418 .media-selection .selection-info .clear-selection:hover {
1422 .media-selection .selection-view {
1423 display: inline-block;
1424 vertical-align: top;
1427 .media-selection .attachments {
1428 display: inline-block;
1433 vertical-align: top;
1436 .media-selection .attachment {
1440 -webkit-box-shadow: none;
1444 .media-selection .attachment .thumbnail {
1451 .media-selection .attachment .icon {
1455 .media-selection .attachment-preview {
1456 -webkit-box-shadow: none;
1461 .media-selection .attachment.selection.details .thumbnail {
1470 .media-selection:after {
1478 background-image: -webkit-gradient(linear, left top, right top, from(rgba( 255, 255, 255, 1 )), to(rgba( 255, 255, 255, 0 )));
1479 background-image: -webkit-linear-gradient(left, rgba( 255, 255, 255, 1 ), rgba( 255, 255, 255, 0 ));
1480 background-image: linear-gradient(to right, rgba( 255, 255, 255, 1 ) , rgba( 255, 255, 255, 0 ) );
1483 .media-selection .attachment .filename {
1490 .media-frame .spinner {
1491 background: url(../images/spinner.gif) no-repeat;
1492 -webkit-background-size: 20px 20px;
1493 background-size: 20px 20px;
1496 filter: alpha(opacity=70);
1502 .media-toolbar .spinner {
1507 * Attachment Details
1509 .attachment-details {
1514 .attachment-details .settings-save-status {
1516 text-transform: none;
1520 .attachment-details .settings-save-status .spinner {
1524 .attachment-details .settings-save-status .saved {
1529 .attachment-details.save-waiting .settings-save-status .spinner,
1530 .attachment-details.save-complete .settings-save-status .saved {
1537 margin-bottom: 16px;
1540 border-bottom: 1px solid #ddd;
1541 padding-bottom: 11px;
1544 .attachment-info .filename {
1547 word-wrap: break-word;
1550 .attachment-info .thumbnail {
1560 .uploading .attachment-info .thumbnail {
1563 -webkit-box-shadow: inset 0 0 15px rgba( 0, 0, 0, 0.1 );
1564 box-shadow: inset 0 0 15px rgba( 0, 0, 0, 0.1 );
1567 .uploading .attachment-info .media-progress-bar {
1571 .attachment-info .thumbnail-image:after {
1579 -webkit-box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
1580 box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
1584 .attachment-info .thumbnail img {
1591 .attachment-info .details {
1597 .attachment-info .edit-attachment,
1598 .attachment-info .refresh-attachment,
1599 .attachment-info .delete-attachment,
1600 .attachment-info .trash-attachment,
1601 .attachment-info .untrash-attachment {
1603 text-decoration: none;
1604 white-space: nowrap;
1607 .attachment-info .refresh-attachment,
1608 .attachment-details.needs-refresh .attachment-info .edit-attachment {
1612 .attachment-details.needs-refresh .attachment-info .refresh-attachment,
1613 .attachment-info .edit-attachment {
1617 .media-modal .delete-attachment,
1618 .media-modal .trash-attachment,
1619 .media-modal .untrash-attachment {
1623 .media-modal .delete-attachment:hover,
1624 .media-modal .trash-attachment:hover,
1625 .media-modal .untrash-attachment:hover {
1630 * Attachment Display Settings
1632 .attachment-display-settings {
1638 .attachment-display-settings h4 {
1639 margin: 1.4em 0 0.4em;
1642 .collection-settings {
1646 .collection-settings .setting input[type="checkbox"] {
1651 .collection-settings .setting span {
1658 .media-modal .imgedit-wrap {
1662 .media-modal .imgedit-wait {
1663 height: auto !important;
1669 .media-modal .imgedit-wrap .imgedit-panel-content {
1679 .media-modal .imgedit-wrap .imgedit-settings {
1680 background: #f3f3f3;
1681 border-right: 1px solid #ddd;
1682 padding: 0 16px 16px;
1691 .media-modal .imgedit-group {
1694 border-bottom: 1px solid #ddd;
1695 -webkit-box-shadow: none;
1698 margin-bottom: 16px;
1700 padding-bottom: 16px;
1701 position: relative; /* RTL fix, #WP29352 */
1704 .media-modal .imgedit-group:last-of-type {
1710 .media-modal .imgedit-group-top h3 {
1711 text-transform: uppercase;
1718 .media-modal .imgedit-group-top h3 a {
1719 text-decoration: none;
1723 .media-modal .imgedit-help-toggle {
1729 .media-modal .imgedit-help-toggled span.dashicons:before {
1733 .media-modal .imgedit-group img {
1737 .media-modal .imgedit-wrap div.updated {
1739 margin-bottom: 16px;
1744 * Embed from URL and Image Details
1756 .media-frame .embed-url input {
1761 -webkit-box-shadow: inset 2px 2px 4px -2px rgba( 0, 0, 0, 0.1 );
1762 box-shadow: inset 2px 2px 4px -2px rgba( 0, 0, 0, 0.1 );
1765 .media-frame .embed-url .spinner {
1771 .media-frame .embed-loading .embed-url .spinner {
1775 .embed-link-settings,
1776 .embed-media-settings {
1782 padding: 16px 16px 32px;
1786 .embed-preview img, .embed-preview iframe, .embed-preview embed {
1790 .embed-preview img {
1794 .image-details .media-modal {
1799 .image-details .media-frame-title,
1800 .image-details .media-frame-content,
1801 .image-details .media-frame-router {
1805 .image-details .embed-media-settings {
1811 .image-details .embed-media-settings,
1812 .image-details .embed-media-settings div {
1813 -webkit-box-sizing: border-box;
1814 -moz-box-sizing: border-box;
1815 box-sizing: border-box;
1818 .image-details .column-settings {
1819 background: #f3f3f3;
1820 border-left: 1px solid #ddd;
1828 .image-details .column-settings h3 {
1831 border-top: 1px solid #ddd;
1834 .image-details .column-image {
1841 .image-details .image {
1845 .image-details .image img {
1850 .image-details .advanced-toggle {
1852 text-decoration: none;
1856 .image-details .advanced-toggle:after {
1857 font: normal 20px/1 'dashicons';
1859 vertical-align: top;
1860 -webkit-font-smoothing: antialiased;
1861 -moz-osx-font-smoothing: grayscale;
1863 display: inline-block;
1867 .image-details .advanced-visible .advanced-toggle:after {
1871 .image-details .embed-media-settings .size {
1875 .image-details .custom-size span {
1879 .image-details .custom-size label {
1884 .image-details .custom-size span small {
1889 .image-details .custom-size input {
1893 .image-details .custom-size .sep {
1895 margin: 26px 6px 0 6px;
1898 .image-details .custom-size:after {
1904 .media-embed .thumbnail {
1911 .media-embed .thumbnail img {
1916 .media-embed .thumbnail:after {
1924 -webkit-box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
1925 box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
1929 .media-embed .setting {
1937 .image-details .embed-media-settings .setting {
1942 .image-details .actions {
1946 .image-details .hidden {
1950 .media-embed .setting input[type="text"],
1951 .media-embed .setting textarea {
1958 .image-details .embed-media-settings .setting input[type="text"],
1959 .image-details .embed-media-settings .setting textarea {
1964 .image-details .embed-media-settings .setting input.link-to-custom,
1965 .image-details .embed-media-settings .link-target,
1966 .image-details .embed-media-settings .custom-size {
1971 .image-details .embed-media-settings .link-target {
1975 .media-embed .setting input.hidden,
1976 .media-embed .setting textarea.hidden {
1980 .media-embed .setting span {
1988 .image-details .embed-media-settings .setting span {
1992 margin: 8px 1% 0 1%;
1996 .media-embed .setting .button-group {
2000 .media-embed-sidebar {
2011 /* Drag & drop on the editor upload */
2012 #wp-fullscreen-body .uploader-editor,
2013 .wp-editor-wrap .uploader-editor {
2014 background: rgba( 150, 150, 150, 0.9 );
2020 z-index: 99998; /* under the toolbar */
2025 #wp-fullscreen-body .uploader-editor {
2026 background: rgba( 0, 86, 132, 0.9 );
2028 z-index: 100050; /* above the editor toolbar */
2031 .wp-editor-wrap.wp-fullscreen-wrap .uploader-editor {
2035 #wp-fullscreen-body .uploader-editor-content,
2036 .wp-editor-wrap .uploader-editor-content {
2037 border: 1px dashed #fff;
2045 #wp-fullscreen-body .uploader-editor .uploader-editor-title,
2046 .wp-editor-wrap .uploader-editor .uploader-editor-title {
2051 -webkit-transform: translateY( -50% );
2052 -ms-transform: translateY(-50%);
2053 transform: translateY( -50% );
2063 .wp-editor-wrap .uploader-editor.droppable {
2064 background: rgba( 0, 86, 132, 0.9 );
2067 #wp-fullscreen-body .uploader-editor .uploader-editor-title,
2068 .wp-editor-wrap .uploader-editor.droppable .uploader-editor-title {
2075 .ie7 .media-frame .attachments-browser {
2079 .ie7 .media-frame .embed-url input {
2088 .ie7 .attachment-display-settings {
2092 .ie7 .attachment-preview,
2093 .ie7 .attachment-preview .thumbnail {
2098 .ie7 .media-frame .attachment .describe {
2102 .ie7 .media-sidebar .setting select {
2106 .ie7 .media-sidebar .setting input[type="text"],
2107 .ie7 .media-sidebar .setting input[type="password"],
2108 .ie7 .media-sidebar .setting input[type="email"],
2109 .ie7 .media-sidebar .setting input[type="number"],
2110 .ie7 .media-sidebar .setting input[type="search"],
2111 .ie7 .media-sidebar .setting input[type="tel"],
2112 .ie7 .media-sidebar .setting input[type="url"],
2113 .ie7 .media-sidebar .setting textarea {
2117 .ie7 .media-sidebar .setting .link-to-custom {
2126 .rtl .media-frame .search,
2127 .rtl .media-frame input[type="text"],
2128 .rtl .media-frame input[type="password"],
2129 .rtl .media-frame input[type="number"],
2130 .rtl .media-frame input[type="search"],
2131 .rtl .media-frame input[type="email"],
2132 .rtl .media-frame input[type="url"],
2133 .rtl .media-frame input[type="tel"],
2134 .rtl .media-frame textarea,
2135 .rtl .media-frame select {
2136 font-family: Tahoma, sans-serif;
2139 :lang(he-il) .rtl .media-modal,
2140 :lang(he-il) .rtl .media-frame,
2141 :lang(he-il) .rtl .media-frame .search,
2142 :lang(he-il) .rtl .media-frame input[type="text"],
2143 :lang(he-il) .rtl .media-frame input[type="password"],
2144 :lang(he-il) .rtl .media-frame input[type="number"],
2145 :lang(he-il) .rtl .media-frame input[type="search"],
2146 :lang(he-il) .rtl .media-frame input[type="email"],
2147 :lang(he-il) .rtl .media-frame input[type="url"],
2148 :lang(he-il) .rtl .media-frame textarea,
2149 :lang(he-il) .rtl .media-frame select {
2150 font-family: Arial, sans-serif;
2156 @media only screen and (max-width: 900px) {
2158 /* Drop-down menu */
2159 .media-frame:not(.hide-menu) .media-frame-title,
2160 .media-frame:not(.hide-menu) .media-frame-router,
2161 .media-frame:not(.hide-menu) .media-frame-content,
2162 .media-frame:not(.hide-menu) .media-frame-toolbar {
2166 .media-frame:not(.hide-menu) .media-frame-menu {
2171 .media-frame:not(.hide-menu) .media-menu {
2181 border: 1px solid #ccc;
2184 .media-frame:not(.hide-menu) .media-menu.visible {
2188 .media-frame:not(.hide-menu) .media-menu > a {
2193 .media-frame:not(.hide-menu) .media-menu > a.active {
2197 .media-frame:not(.hide-menu) .media-menu .separator {
2201 .media-frame:not(.hide-menu) .media-frame-title {
2206 .media-frame:not(.hide-menu) .media-frame-title .dashicons {
2207 display: inline-block;
2211 .media-frame:not(.hide-menu) .media-frame-title h1 {
2217 /* End drop-down menu */
2223 .attachments-browser .attachments,
2224 .attachments-browser .uploader-inline,
2225 .attachments-browser .media-toolbar {
2229 .media-sidebar .setting,
2230 .attachment-details .setting {
2234 .media-sidebar .setting input,
2235 .media-sidebar .setting textarea,
2236 .media-sidebar .setting span,
2237 .attachment-details .setting input,
2238 .attachment-details .setting textarea,
2239 .attachment-details .setting span,
2240 .compat-item label span {
2244 .media-sidebar .setting span,
2245 .attachment-details .setting span,
2246 .compat-item label span {
2247 text-align: inherit;
2253 .media-sidebar .setting .value,
2254 .attachment-details .setting .value {
2259 .media-sidebar .setting input[type="text"],
2260 .media-sidebar .setting input[type="password"],
2261 .media-sidebar .setting input[type="email"],
2262 .media-sidebar .setting input[type="number"],
2263 .media-sidebar .setting input[type="search"],
2264 .media-sidebar .setting input[type="tel"],
2265 .media-sidebar .setting input[type="url"],
2266 .media-sidebar .setting textarea,
2267 .media-sidebar .setting select,
2268 .attachment-details .setting input[type="text"],
2269 .attachment-details .setting input[type="password"],
2270 .attachment-details .setting input[type="email"],
2271 .attachment-details .setting input[type="number"],
2272 .attachment-details .setting input[type="search"],
2273 .attachment-details .setting input[type="tel"],
2274 .attachment-details .setting input[type="url"],
2275 .attachment-details .setting textarea,
2276 .attachment-details .setting select {
2283 .media-sidebar .setting select.columns,
2284 .attachment-details .setting select.columns {
2289 .media-frame textarea,
2290 .media-frame .search {
2294 .image-details .column-image {
2299 .image-details .column-settings {
2303 .image-details .media-modal {
2308 .image-details .embed-media-settings .setting {
2312 .image-details .embed-media-settings .setting span {
2319 .image-details .embed-media-settings .setting input.link-to-custom,
2320 .image-details .embed-media-settings .setting input[type="text"],
2321 .image-details .embed-media-settings .setting textarea {
2326 .image-details .embed-media-settings .custom-size {
2330 .collection-settings .setting input[type="checkbox"] {
2338 .media-selection:after {
2342 .media-selection .attachments {
2346 .media-modal .attachments-browser .media-toolbar .search {
2352 .media-modal .attachments-browser .media-toolbar .attachment-filters {
2356 .media-modal .attachments-browser .media-toolbar .spinner {
2360 /* Text inputs need to be 16px, or they force zooming on iOS */
2361 .media-frame input[type="text"],
2362 .media-frame input[type="password"],
2363 .media-frame input[type="number"],
2364 .media-frame input[type="search"],
2365 .media-frame input[type="email"],
2366 .media-frame input[type="url"],
2367 .media-frame textarea,
2368 .media-frame select {
2373 /* Responsive on portrait and landscape */
2374 @media only screen and (max-width: 640px), screen and (max-height: 400px) {
2375 /* Full-bleed modal */
2377 .image-details .media-modal {
2385 .media-modal-backdrop {
2393 -webkit-box-sizing: border-box;
2394 -moz-box-sizing: border-box;
2395 box-sizing: border-box;
2399 .media-sidebar.visible {
2403 .attachments-browser .attachments,
2404 .attachments-browser .uploader-inline,
2405 .attachments-browser .media-toolbar {
2409 .image-details .media-frame-title {
2415 .image-details .column-image,
2416 .image-details .column-settings {
2422 .image-details .column-settings {
2426 /* Media tabs on the top */
2427 .media-frame-content .media-toolbar .instructions {
2432 /* Landscape specific header override */
2433 @media screen and (max-height: 400px) {
2438 .media-frame-router {
2442 .media-frame-content {
2446 .attachments-browser .attachments {
2450 /* Prevent unnecessary scrolling on title input */
2451 .embed-link-settings {
2456 @media only screen and (max-width: 480px) {
2457 .media-modal-close {
2462 .media-modal .media-frame-title {
2466 .media-modal .media-frame-title h1,
2467 .media-frame:not(.hide-menu) .media-frame-title h1 {
2472 .media-frame:not(.hide-menu) .media-frame-title .dashicons {
2476 .media-frame-router,
2477 .media-frame:not(.hide-menu) .media-menu {
2481 .media-frame-content {
2485 .media-frame.hide-router .media-frame-content {
2494 (-o-min-device-pixel-ratio: 5/4),
2495 (-webkit-min-device-pixel-ratio: 1.25),
2496 (min-resolution: 120dpi) {
2499 background-image: url(../images/uploader-icons-2x.png);
2500 -webkit-background-size: 134px 15px;
2501 background-size: 134px 15px;
2504 .media-frame .spinner {
2505 background-image: url(../images/spinner-2x.gif);
2509 .media-frame-content[data-columns="1"] .attachment {
2513 .media-frame-content[data-columns="2"] .attachment {
2517 .media-frame-content[data-columns="3"] .attachment {
2521 .media-frame-content[data-columns="4"] .attachment {
2525 .media-frame-content[data-columns="5"] .attachment {
2529 .media-frame-content[data-columns="6"] .attachment {
2533 .media-frame-content[data-columns="7"] .attachment {
2537 .media-frame-content[data-columns="8"] .attachment {
2541 .media-frame-content[data-columns="9"] .attachment {
2545 .media-frame-content[data-columns="10"] .attachment {
2549 .media-frame-content[data-columns="11"] .attachment {
2553 .media-frame-content[data-columns="12"] .attachment {