6 font-family: "Open Sans", sans-serif;
11 .media-frame textarea {
17 .wp-admin .media-frame select {
27 .media-frame a:hover {
31 .media-frame a.button {
35 .media-frame a.button:hover {
39 .media-frame a.button-primary,
40 .media-frame a.button-primary:hover {
44 .media-frame input[type="text"],
45 .media-frame input[type="password"],
46 .media-frame input[type="number"],
47 .media-frame input[type="search"],
48 .media-frame input[type="email"],
49 .media-frame input[type="url"],
50 .media-frame textarea,
52 font-family: "Open Sans", sans-serif;
54 -moz-box-sizing: border-box;
55 -webkit-box-sizing: border-box;
56 -ms-box-sizing: border-box; /* ie8 only */
57 box-sizing: border-box;
60 border-color: #dfdfdf;
68 .media-frame input:disabled,
69 .media-frame textarea:disabled,
70 .media-frame input[readonly],
71 .media-frame textarea[readonly] {
72 background-color: #eee;
75 .media-frame input[type="search"] {
76 -webkit-appearance: textfield;
79 .media-frame :-moz-placeholder {
83 /* Enable draggable on IE10 touch events until it's rolled into jQuery UI core */
86 -ms-touch-action: none;
90 .meta-box-sortables.ui-sortable {
91 -ms-touch-action: auto;
95 .meta-box-sortables.ui-sortable .hndle {
96 -ms-touch-action: none;
112 .wp-customizer .media-modal {
116 .media-modal-backdrop {
128 .wp-customizer .media-modal-backdrop {
134 text-decoration: none;
142 .media-modal-close span.media-modal-icon {
147 background-image: none;
150 .media-modal-close .media-modal-icon:before {
152 font: normal 20px/1 'dashicons';
154 vertical-align: middle;
155 -webkit-font-smoothing: antialiased;
156 -moz-osx-font-smoothing: grayscale;
160 .media-modal-close:hover .media-modal-icon:before {
164 .media-modal-close:active {
168 .media-modal-content {
177 -webkit-font-smoothing: subpixel-antialiased;
181 background-image: url(../images/uploader-icons.png);
182 background-repeat: no-repeat;
196 border: 0 solid #dfdfdf;
200 .media-toolbar-primary {
205 .media-toolbar-secondary {
210 .media-toolbar-primary > .media-button,
211 .media-toolbar-primary > .media-button-group {
217 .media-toolbar-secondary > .media-button,
218 .media-toolbar-secondary > .media-button-group {
233 padding: 0 16px 24px;
236 border-left: 1px solid #dfdfdf;
238 -webkit-overflow-scrolling: touch;
241 .hide-toolbar .media-sidebar {
245 .media-sidebar .sidebar-title {
248 padding: 12px 10px 10px;
252 .media-sidebar .sidebar-content {
254 margin-bottom: 130px;
257 .media-sidebar .search {
265 text-transform: uppercase;
271 .media-sidebar .setting {
278 .media-sidebar .setting label {
282 .media-sidebar .setting .link-to-custom {
286 .media-sidebar .setting span {
292 .media-sidebar .setting select {
296 .media-sidebar .setting input[type="checkbox"],
297 .media-sidebar .field input[type="checkbox"] {
304 .media-sidebar .setting span,
305 .compat-item label span {
315 .media-sidebar .setting input,
316 .media-sidebar .setting textarea {
322 .media-sidebar .setting textarea,
323 .compat-item .field textarea {
328 .media-sidebar select {
352 .compat-item .field {
358 .compat-item .label {
365 .compat-item .label span {
370 .compat-item .field {
375 .compat-item .field input {
392 border-right-width: 1px;
393 border-right-style: solid;
394 -webkit-user-select: none;
395 -moz-user-select: none;
396 -ms-user-select: none;
408 text-decoration: none;
411 .media-menu > a:hover {
413 background: rgba( 0, 0, 0, 0.04 );
416 .media-menu > a:active {
421 .media-menu .active:hover {
426 .media-menu .separator {
430 border-top: 1px solid #dfdfdf;
431 border-bottom: 1px solid #fff;
442 -webkit-user-select: none;
443 -moz-user-select: none;
444 -ms-user-select: none;
451 padding: 8px 10px 9px;
456 text-decoration: none;
459 .media-router > a:last-child {
463 .media-router > a:active,
464 .media-router > a:focus {
468 .media-router .active,
469 .media-router .active:hover {
473 .media-router .active,
474 .media-router > a.active:last-child {
478 .media-router .active:after {
512 .media-frame-router {
521 .media-frame-content {
531 border-top-width: 1px;
532 border-top-style: solid;
533 border-bottom-width: 1px;
534 border-bottom-style: solid;
537 .media-frame-toolbar {
546 .media-frame.hide-menu .media-frame-title,
547 .media-frame.hide-menu .media-frame-router,
548 .media-frame.hide-menu .media-frame-toolbar,
549 .media-frame.hide-menu .media-frame-content {
553 .media-frame.hide-menu .media-frame-menu {
557 .media-frame.hide-toolbar .media-frame-content {
561 .media-frame.hide-toolbar .media-frame-toolbar {
565 .media-frame.hide-router .media-frame-content {
569 .media-frame.hide-router .media-frame-router {
573 .media-frame.hide-router .media-frame-title {
574 border-bottom: 1px solid #dfdfdf;
575 box-shadow: 0 4px 4px -4px rgba( 0, 0, 0, 0.1 );
578 .media-frame .media-toolbar .add-to-gallery {
582 .media-frame-title h1 {
592 .media-frame .media-iframe {
596 .media-frame .media-iframe,
597 .media-frame .media-iframe iframe {
604 * Attachment Browser Filters
606 .media-frame select.attachment-filters {
614 .media-frame .search {
620 font-family: "Open Sans", sans-serif;
621 -webkit-appearance: none;
624 .media-toolbar-secondary .search {
634 -webkit-overflow-scrolling: touch;
650 -webkit-user-select: none;
651 -moz-user-select: none;
652 -ms-user-select: none;
653 -o-user-select: none;
657 .selected.attachment {
663 .attachment-preview {
668 inset 0 0 15px rgba( 0, 0, 0, 0.1 ),
669 inset 0 0 0 1px rgba( 0, 0, 0, 0.05 );
680 .attachment .thumbnail {
691 .attachment-preview .thumbnail:after {
699 box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
704 .attachment .thumbnail img {
710 .attachment .thumbnail .centered {
716 -webkit-transform: translate( 50%, 50% );
717 -moz-transform: translate( 50%, 50% );
718 -ms-transform: translate( 50%, 50% );
719 -o-transform: translate( 50%, 50% );
720 transform: translate( 50%, 50% );
723 .attachment .thumbnail .centered img {
724 -webkit-transform: translate( -50%, -50% );
725 -moz-transform: translate( -50%, -50% );
726 -ms-transform: translate( -50%, -50% );
727 -o-transform: translate( -50%, -50% );
728 transform: translate( -50%, -50% );
731 .attachment .filename {
739 word-wrap: break-word;
742 background: rgba( 255, 255, 255, 0.8 );
743 box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
746 .attachment .filename div {
750 .attachment-preview .thumbnail {
755 .attachment .thumbnail img {
770 text-decoration: none;
772 background-color: #fff;
773 background-position: -96px 4px;
776 box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.3 );
779 .attachment .close:hover {
780 box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.6 );
783 .attachment:hover .close {
797 .attachment .check div {
798 background-position: -1px 0;
804 .attachment .check:hover div {
805 background-position: -40px 0;
808 .attachment.selected .check {
812 .attachment.details .check div {
813 background-position: -21px 0;
816 .attachment.details .check:hover div {
817 background-position: -60px 0;
820 .media-frame .attachment .describe {
831 * Attachments Browser
833 .media-frame .attachments-browser {
840 .attachments-browser .media-toolbar {
845 .attachments-browser .media-toolbar-primary > .media-button,
846 .attachments-browser .media-toolbar-primary > .media-button-group,
847 .attachments-browser .media-toolbar-secondary > .media-button,
848 .attachments-browser .media-toolbar-secondary > .media-button-group {
852 .attachments-browser .attachments,
853 .attachments-browser .uploader-inline {
862 .attachments-browser .instructions {
863 display: inline-block;
873 .media-progress-bar {
880 background: rgba( 0, 0, 0, 0.1 );
883 .media-progress-bar div {
889 -webkit-transition: width 300ms;
890 -moz-transition: width 300ms;
891 -ms-transition: width 300ms;
892 -o-transition: width 300ms;
893 transition: width 300ms;
896 .media-uploader-status .media-progress-bar {
901 .uploading.media-uploader-status .media-progress-bar {
905 .attachment-preview .media-progress-bar {
913 .media-uploader-status {
916 padding-bottom: 10px;
920 .media-sidebar .media-uploader-status {
921 border-bottom: 1px solid #dfdfdf;
922 box-shadow: 0 1px 0 #fff;
925 .uploader-inline .media-uploader-status h3 {
929 .media-uploader-status .upload-details {
935 .uploading.media-uploader-status .upload-details {
939 .media-uploader-status .upload-detail-separator {
943 .media-uploader-status .upload-count {
947 .media-uploader-status .upload-dismiss-errors,
948 .media-uploader-status .upload-errors {
952 .errors.media-uploader-status .upload-dismiss-errors,
953 .errors.media-uploader-status .upload-errors {
957 .media-uploader-status .upload-dismiss-errors {
958 text-decoration: none;
961 .media-sidebar .media-uploader-status .upload-dismiss-errors {
967 .upload-errors .upload-error {
968 margin: 8px auto 0 auto;
970 border: 1px #c00 solid;
975 .upload-errors .upload-error-label {
981 background-image: -webkit-gradient(linear, left top, left bottom, from(#e00), to(#a00));
982 background-image: -webkit-linear-gradient(top, #e00, #a00);
983 background-image: -moz-linear-gradient(top, #e00, #a00);
984 background-image: -o-linear-gradient(top, #e00, #a00);
985 background-image: linear-gradient(to bottom, #e00, #a00);
989 .upload-errors .upload-error-message {
993 word-wrap: break-word;
1002 background: rgba( 0, 86, 132, 0.9 );
1009 -webkit-transition: opacity 250ms;
1010 -moz-transition: opacity 250ms;
1011 -ms-transition: opacity 250ms;
1012 -o-transition: opacity 250ms;
1013 transition: opacity 250ms;
1016 .uploader-window-content {
1022 border: 1px dashed #fff;
1025 .uploader-window h3 {
1031 -webkit-transform: translateY( -50% );
1032 -moz-transform: translateY( -50% );
1033 -ms-transform: translateY( -50% );
1034 -o-transform: translateY( -50% );
1035 transform: translateY( -50% );
1042 .uploader-window .media-progress-bar {
1045 background: transparent;
1050 .uploader-window .media-progress-bar div {
1054 .uploading .uploader-window .media-progress-bar {
1058 .media-frame .uploader-inline {
1064 .uploader-inline-content {
1071 .uploader-inline-content .upload-ui {
1075 .uploader-inline-content .post-upload-ui {
1079 .uploader-inline .has-upload-message .upload-ui {
1083 .uploader-inline h3 {
1087 margin-bottom: 1.6em;
1090 .uploader-inline .has-upload-message .upload-instructions {
1093 font-weight: normal;
1096 .uploader-inline .drop-instructions {
1100 .supports-drag-drop .uploader-inline .drop-instructions {
1104 .uploader-inline p {
1108 .uploader-inline .media-progress-bar {
1112 .uploading.uploader-inline .media-progress-bar {
1116 .uploader-inline .browser {
1117 display: inline-block !important;
1129 padding: 0 0 0 16px;
1131 white-space: nowrap;
1134 .media-selection .selection-info {
1135 display: inline-block;
1139 vertical-align: top;
1142 .media-selection.empty,
1143 .media-selection.editing {
1147 .media-selection.one .edit-selection {
1151 .media-selection .count {
1159 .media-selection .selection-info a {
1163 margin: 1px 8px 1px -8px;
1165 text-decoration: none;
1166 border-right: 1px solid #dfdfdf;
1170 .media-selection .selection-info a:hover {
1171 background: #21759B;
1173 border-color: transparent;
1176 .media-selection .selection-info a:last-child {
1181 .media-selection .selection-info .clear-selection {
1185 .media-selection .selection-info .clear-selection:hover {
1189 .media-selection .selection-view {
1190 display: inline-block;
1191 vertical-align: top;
1194 .media-selection .attachments {
1195 display: inline-block;
1199 vertical-align: top;
1202 .media-selection .attachment .icon {
1206 .attachment.selection.selected {
1210 .attachment.selection.details {
1216 .media-selection .attachment.selection.details {
1222 .media-selection:after {
1230 background-image: -webkit-gradient(linear, right top, left top, from( rgba( 255, 255, 255, 1 ) ), to( rgba( 255, 255, 255, 0 ) ));
1231 background-image: -webkit-linear-gradient(right, rgba( 255, 255, 255, 1 ) , rgba( 255, 255, 255, 0 ) );
1232 background-image: -moz-linear-gradient(right, rgba( 255, 255, 255, 1 ) , rgba( 255, 255, 255, 0 ) );
1233 background-image: -o-linear-gradient(right, rgba( 255, 255, 255, 1 ) , rgba( 255, 255, 255, 0 ) );
1234 background-image: linear-gradient(to left, rgba( 255, 255, 255, 1 ) , rgba( 255, 255, 255, 0 ) );
1237 .media-selection .attachment .filename {
1245 .media-frame .spinner {
1246 background: url('../images/spinner.gif') no-repeat;
1247 background-size: 20px 20px;
1250 filter: alpha(opacity=70);
1256 .media-sidebar .settings-save-status {
1257 background: #f5f5f5;
1259 text-transform: none;
1263 .media-sidebar .settings-save-status .spinner {
1267 .media-sidebar .settings-save-status .saved {
1272 .media-sidebar .save-waiting .settings-save-status .spinner,
1273 .media-sidebar .save-complete .settings-save-status .saved {
1278 * Attachment Details
1280 .attachment-details {
1288 margin-bottom: 16px;
1291 border-bottom: 1px solid #e5e5e5;
1292 box-shadow: 0 1px 0 #fff;
1293 padding-bottom: 11px;
1296 .attachment-info .filename {
1299 word-wrap: break-word;
1302 .attachment-info .thumbnail {
1312 .uploading .attachment-info .thumbnail {
1315 box-shadow: inset 0 0 15px rgba( 0, 0, 0, 0.1 );
1318 .uploading .attachment-info .media-progress-bar {
1322 .attachment-info .thumbnail:after {
1330 box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
1334 .attachment-info .thumbnail img {
1341 .attachment-info .details {
1347 .attachment-info .edit-attachment,
1348 .attachment-info .refresh-attachment,
1349 .attachment-info .delete-attachment {
1351 text-decoration: none;
1352 white-space: nowrap;
1355 .attachment-info .refresh-attachment,
1356 .attachment-details.needs-refresh .attachment-info .edit-attachment {
1360 .attachment-details.needs-refresh .attachment-info .refresh-attachment,
1361 .attachment-info .edit-attachment {
1365 .attachment-info .delete-attachment {
1369 .attachment-info .delete-attachment:hover {
1374 * Attachment Display Settings
1376 .attachment-display-settings {
1382 .attachment-display-settings h4 {
1383 margin: 1.4em 0 0.4em;
1403 .media-frame .embed-url input {
1408 box-shadow: inset 2px 2px 4px -2px rgba( 0, 0, 0, 0.1 );
1411 .media-frame .embed-url .spinner {
1417 .media-frame .embed-loading .embed-url .spinner {
1421 .embed-link-settings,
1422 .embed-image-settings {
1428 padding: 16px 16px 32px;
1432 .media-embed .thumbnail {
1439 .media-embed .thumbnail img {
1444 .media-embed .thumbnail:after {
1452 box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
1456 .media-embed .setting {
1464 .media-embed .setting span {
1472 .media-embed .setting .button-group {
1476 .media-embed .setting input,
1477 .media-embed .setting textarea {
1487 .ie7 .media-frame .attachments-browser {
1491 .ie7 .media-frame .embed-url input {
1500 .ie7 .attachment-display-settings {
1504 .ie7 .attachment-preview,
1505 .ie7 .attachment-preview .thumbnail {
1510 .ie7 .media-frame .attachment .describe {
1514 .ie7 .media-sidebar .setting select {
1518 .ie7 .media-sidebar .setting input,
1519 .ie7 .media-sidebar .setting textarea {
1523 .ie7 .media-sidebar .setting .link-to-custom {
1532 .rtl .media-frame .search,
1533 .rtl .media-frame input[type="text"],
1534 .rtl .media-frame input[type="password"],
1535 .rtl .media-frame input[type="number"],
1536 .rtl .media-frame input[type="search"],
1537 .rtl .media-frame input[type="email"],
1538 .rtl .media-frame input[type="url"],
1539 .rtl .media-frame textarea,
1540 .rtl .media-frame select {
1541 font-family: Tahoma, sans-serif;
1544 :lang(he-il) .rtl .media-modal,
1545 :lang(he-il) .rtl .media-frame,
1546 :lang(he-il) .rtl .media-frame .search,
1547 :lang(he-il) .rtl .media-frame input[type="text"],
1548 :lang(he-il) .rtl .media-frame input[type="password"],
1549 :lang(he-il) .rtl .media-frame input[type="number"],
1550 :lang(he-il) .rtl .media-frame input[type="search"],
1551 :lang(he-il) .rtl .media-frame input[type="email"],
1552 :lang(he-il) .rtl .media-frame input[type="url"],
1553 :lang(he-il) .rtl .media-frame textarea,
1554 :lang(he-il) .rtl .media-frame select {
1555 font-family: Arial, sans-serif;
1561 @media only screen and (max-width: 960px) {
1562 .media-frame-content .media-toolbar-primary .search,
1563 .media-frame-content .media-toolbar-secondary .attachment-filters {
1571 @media only screen and (max-width: 900px) {
1581 .media-frame-router,
1582 .media-frame-content,
1583 .media-frame-toolbar {
1589 padding: 0 10px 24px;
1592 .attachments-browser .attachments,
1593 .attachments-browser .uploader-inline,
1594 .attachments-browser .media-toolbar {
1598 .media-sidebar .setting input,
1599 .media-sidebar .setting textarea,
1600 .media-sidebar .setting span,
1601 .compat-item label span {
1605 .media-sidebar .setting span,
1606 .compat-item label span {
1607 text-align: inherit;
1614 .media-sidebar .setting input,
1615 .media-sidebar .setting textarea,
1616 .media-sidebar .setting select {
1621 .media-sidebar .setting select.columns {
1626 .media-frame textarea,
1627 .media-frame .search {
1631 .media-frame-content .attachment .icon {
1639 .media-selection:after {
1643 .media-selection .attachments {
1647 .media-menu .separator {
1651 .media-modal-close {
1655 /* Text inputs need to be 16px, or they force zooming on iOS */
1656 .media-frame input[type="text"],
1657 .media-frame input[type="password"],
1658 .media-frame input[type="number"],
1659 .media-frame input[type="search"],
1660 .media-frame input[type="email"],
1661 .media-frame input[type="url"],
1662 .media-frame textarea,
1663 .media-frame select {
1668 /* Responsive on portrait and landscape */
1669 @media only screen and (max-width: 640px), screen and (max-height: 400px) {
1671 /* Media tabs on the top */
1672 .media-frame-content .media-toolbar .instructions {
1686 border-bottom: 1px solid #dddddd;
1688 padding: 10px 0 10px 10px;
1694 white-space: nowrap;
1695 text-overflow: ellipsis;
1699 .media-frame-title {
1703 .media-frame-toolbar {
1709 border-top: 1px solid #DEDEDE;
1720 .attachments-browser .attachments {
1724 .attachment-details h3 {
1728 /* Shorten right-side links so they don't overlap the close button */
1729 .media-menu a:nth-child(2),
1730 .media-menu a:last-child {
1734 .media-menu .separator {
1738 .media-frame-title {
1744 .media-frame-title h1 {
1749 .media-frame-router {
1754 .media-frame-content {
1759 .media-frame .attachments-browser {
1760 padding-bottom: 300px;
1764 border-bottom: 1px solid #dddddd;
1771 .media-toolbar-primary, .media-toolbar-secondary {
1775 .uploader-inline h3 {
1779 .uploader-inline-content {
1783 .uploader-inline-content .upload-ui {
1787 .attachments-browser .attachments, .attachments-browser .uploader-inline {
1789 margin-right: 180px;
1792 /* Full-bleed modal */
1801 .media-modal-backdrop {
1805 .attachments-browser .attachment,
1806 .attachments-browser .attachment-preview {
1810 .attachments-browser .media-toolbar-primary input.search {
1814 .uploader-inline-content {
1818 .media-sidebar .setting input[type="checkbox"],
1819 .media-sidebar .field input[type="checkbox"] {
1823 /* Image From Link */
1824 .embed-link-settings,
1825 .embed-image-settings {
1826 padding-bottom: 52px;
1830 .media-frame.hide-router .media-frame-content {
1835 .gallery-settings h3 {
1841 /* Landscape specific header override */
1842 @media screen and (max-height: 400px) {
1844 padding: 0 0 0 10px;
1850 white-space: nowrap;
1851 text-overflow: ellipsis;
1853 padding: 10px inherit;
1856 .media-menu a:nth-child(2),
1857 .media-menu a:last-child {
1861 .media-modal-close {
1865 .media-frame-router {
1869 .media-frame-content {
1873 .attachments-browser .attachments {
1877 /* Prevent unnecessary scrolling on title input */
1878 .embed-link-settings {
1883 @media only screen and (max-width: 680px) {
1884 .media-frame-content .media-toolbar .search,
1885 .media-frame-content .media-toolbar .attachment-filters {
1894 (-o-min-device-pixel-ratio: 5/4),
1895 (-webkit-min-device-pixel-ratio: 1.25),
1896 (min-resolution: 120dpi) {
1899 background-image: url(../images/uploader-icons-2x.png);
1900 background-size: 134px 15px;
1903 .media-frame .spinner {
1904 background-image: url('../images/spinner-2x.gif');