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 {
23 .wp-admin .media-frame select {
33 .media-frame a:hover {
37 .media-frame a.button {
41 .media-frame a.button:hover {
45 .media-frame a.button-primary,
46 .media-frame a.button-primary:hover {
50 .media-frame input[type="text"],
51 .media-frame input[type="password"],
52 .media-frame input[type="number"],
53 .media-frame input[type="search"],
54 .media-frame input[type="email"],
55 .media-frame input[type="url"],
56 .media-frame textarea,
58 font-family: "Open Sans", sans-serif;
60 -moz-box-sizing: border-box;
61 -webkit-box-sizing: border-box;
62 -ms-box-sizing: border-box; /* ie8 only */
63 box-sizing: border-box;
66 border-color: #dfdfdf;
74 .media-frame input:disabled,
75 .media-frame textarea:disabled,
76 .media-frame input[readonly],
77 .media-frame textarea[readonly] {
78 background-color: #eee;
81 .media-frame input[type="search"] {
82 -webkit-appearance: textfield;
85 .media-frame :-moz-placeholder {
89 /* Enable draggable on IE10 touch events until it's rolled into jQuery UI core */
92 -ms-touch-action: none;
96 .meta-box-sortables.ui-sortable {
97 -ms-touch-action: auto;
101 .meta-box-sortables.ui-sortable .hndle {
102 -ms-touch-action: none;
118 .wp-customizer .media-modal {
122 .media-modal-backdrop {
134 .wp-customizer .media-modal-backdrop {
140 text-decoration: none;
148 .media-modal-close span.media-modal-icon {
153 background-image: none;
156 .media-modal-close .media-modal-icon:before {
158 font: normal 20px/1 'dashicons';
160 vertical-align: middle;
161 -webkit-font-smoothing: antialiased;
162 -moz-osx-font-smoothing: grayscale;
166 .media-modal-close:hover .media-modal-icon:before {
170 .media-modal-close:active {
174 .media-modal-content {
182 box-shadow: 0 5px 15px rgba(0,0,0,0.7);
184 -webkit-font-smoothing: subpixel-antialiased;
188 background-image: url(../images/uploader-icons.png);
189 background-repeat: no-repeat;
203 border: 0 solid #dfdfdf;
207 .media-toolbar-primary {
212 .media-toolbar-secondary {
217 .media-toolbar-primary > .media-button,
218 .media-toolbar-primary > .media-button-group {
224 .media-toolbar-secondary > .media-button,
225 .media-toolbar-secondary > .media-button-group {
240 padding: 0 16px 24px;
243 border-left: 1px solid #ddd;
245 -webkit-overflow-scrolling: touch;
248 .hide-toolbar .media-sidebar {
252 .media-sidebar .sidebar-title {
255 padding: 12px 10px 10px;
259 .media-sidebar .sidebar-content {
261 margin-bottom: 130px;
264 .media-sidebar .search {
272 text-transform: uppercase;
278 .media-sidebar .setting {
285 .media-sidebar .setting label {
289 .media-sidebar .setting .link-to-custom {
293 .media-sidebar .setting span {
299 .media-sidebar .setting select {
303 .media-sidebar .setting input[type="checkbox"],
304 .media-sidebar .field input[type="checkbox"] {
311 .media-sidebar .setting span,
312 .compat-item label span {
322 .media-sidebar .setting input,
323 .media-sidebar .setting textarea {
329 .media-sidebar .setting textarea,
330 .compat-item .field textarea {
335 .media-sidebar select {
359 .compat-item .field {
365 .compat-item .label {
372 .compat-item .label span {
377 .compat-item .field {
382 .compat-item .field input {
400 border-right-width: 1px;
401 border-right-style: solid;
402 border-right-color: #ccc;
403 -webkit-user-select: none;
404 -moz-user-select: none;
405 -ms-user-select: none;
417 text-decoration: none;
420 .media-menu > a:hover {
422 background: rgba( 0, 0, 0, 0.04 );
425 .media-menu > a:active {
430 .media-menu .active:hover {
435 .media-menu .separator {
439 border-top: 1px solid #ddd;
450 -webkit-user-select: none;
451 -moz-user-select: none;
452 -ms-user-select: none;
459 padding: 8px 10px 9px;
464 text-decoration: none;
467 .media-router > a:last-child {
471 .media-router > a:active,
472 .media-router > a:focus {
476 .media-router .active,
477 .media-router .active:hover {
481 .media-router .active,
482 .media-router > a.active:last-child {
485 border: 1px solid #ddd;
489 .media-router .active:after {
523 .media-frame-router {
532 .media-frame-content {
543 border-top: 1px solid #ddd;
544 border-bottom: 1px solid #ddd;
547 .media-frame-toolbar {
556 .media-frame.hide-menu .media-frame-title,
557 .media-frame.hide-menu .media-frame-router,
558 .media-frame.hide-menu .media-frame-toolbar,
559 .media-frame.hide-menu .media-frame-content {
563 .media-frame.hide-menu .media-frame-menu {
567 .media-frame.hide-toolbar .media-frame-content {
571 .media-frame.hide-toolbar .media-frame-toolbar {
575 .media-frame.hide-router .media-frame-content {
579 .media-frame.hide-router .media-frame-router {
583 .media-frame.hide-router .media-frame-title {
584 border-bottom: 1px solid #dfdfdf;
585 box-shadow: 0 4px 4px -4px rgba( 0, 0, 0, 0.1 );
588 .media-frame .media-toolbar .add-to-gallery {
592 .media-frame-title h1 {
602 .media-frame .media-iframe {
606 .media-frame .media-iframe,
607 .media-frame .media-iframe iframe {
614 * Attachment Browser Filters
616 .media-frame select.attachment-filters {
624 .media-frame .search {
630 font-family: "Open Sans", sans-serif;
631 -webkit-appearance: none;
634 .media-toolbar-secondary .search {
644 -webkit-overflow-scrolling: touch;
660 -webkit-user-select: none;
661 -moz-user-select: none;
662 -ms-user-select: none;
663 -o-user-select: none;
667 .selected.attachment {
673 .attachment-preview {
678 inset 0 0 15px rgba( 0, 0, 0, 0.1 ),
679 inset 0 0 0 1px rgba( 0, 0, 0, 0.05 );
690 .attachment .thumbnail {
701 .attachment-preview .thumbnail:after {
709 box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
714 .attachment .thumbnail img {
720 .attachment .thumbnail .centered {
726 -webkit-transform: translate( 50%, 50% );
727 -moz-transform: translate( 50%, 50% );
728 -ms-transform: translate( 50%, 50% );
729 -o-transform: translate( 50%, 50% );
730 transform: translate( 50%, 50% );
733 .attachment .thumbnail .centered img {
734 -webkit-transform: translate( -50%, -50% );
735 -moz-transform: translate( -50%, -50% );
736 -ms-transform: translate( -50%, -50% );
737 -o-transform: translate( -50%, -50% );
738 transform: translate( -50%, -50% );
741 .attachment .filename {
749 word-wrap: break-word;
752 background: rgba( 255, 255, 255, 0.8 );
753 box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
756 .attachment .filename div {
760 .attachment-preview .thumbnail {
765 .attachment .thumbnail img {
780 text-decoration: none;
782 background-color: #fff;
783 background-position: -96px 4px;
786 box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.3 );
789 .attachment .close:hover {
790 box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.6 );
793 .attachment:hover .close {
806 box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba( 0, 0, 0, 0.4 );
809 .attachment .check div {
810 background-position: -1px 0;
816 .attachment .check:hover div {
817 background-position: -40px 0;
820 .attachment.selected .check {
824 .attachment.details {
825 box-shadow: 0 0 0 1px #fff,
829 .attachment.details .check {
830 background-color: #1e8cbe;
831 box-shadow: 0 0 0 1px #fff,
835 .attachment.details .check div {
836 background-position: -21px 0;
839 .attachment.details .check:hover div {
840 background-position: -60px 0;
843 .media-frame .attachment .describe {
854 * Attachments Browser
856 .media-frame .attachments-browser {
863 .attachments-browser .media-toolbar {
868 .attachments-browser .media-toolbar-primary > .media-button,
869 .attachments-browser .media-toolbar-primary > .media-button-group,
870 .attachments-browser .media-toolbar-secondary > .media-button,
871 .attachments-browser .media-toolbar-secondary > .media-button-group {
875 .attachments-browser .attachments,
876 .attachments-browser .uploader-inline {
885 .attachments-browser .instructions {
886 display: inline-block;
896 .media-progress-bar {
903 background: rgba( 0, 0, 0, 0.1 );
906 .media-progress-bar div {
912 -webkit-transition: width 300ms;
913 -moz-transition: width 300ms;
914 -ms-transition: width 300ms;
915 -o-transition: width 300ms;
916 transition: width 300ms;
919 .media-uploader-status .media-progress-bar {
924 .uploading.media-uploader-status .media-progress-bar {
928 .attachment-preview .media-progress-bar {
936 .media-uploader-status {
939 padding-bottom: 10px;
943 .media-sidebar .media-uploader-status {
944 border-bottom: 1px solid #dfdfdf;
945 box-shadow: 0 1px 0 #fff;
948 .uploader-inline .media-uploader-status h3 {
952 .media-uploader-status .upload-details {
958 .uploading.media-uploader-status .upload-details {
962 .media-uploader-status .upload-detail-separator {
966 .media-uploader-status .upload-count {
970 .media-uploader-status .upload-dismiss-errors,
971 .media-uploader-status .upload-errors {
975 .errors.media-uploader-status .upload-dismiss-errors,
976 .errors.media-uploader-status .upload-errors {
980 .media-uploader-status .upload-dismiss-errors {
981 text-decoration: none;
984 .media-sidebar .media-uploader-status .upload-dismiss-errors {
990 .upload-errors .upload-error {
991 margin: 8px auto 0 auto;
993 border: 1px #c00 solid;
998 .upload-errors .upload-error-label {
1004 background-image: -webkit-gradient(linear, left top, left bottom, from(#e00), to(#a00));
1005 background-image: -webkit-linear-gradient(top, #e00, #a00);
1006 background-image: -moz-linear-gradient(top, #e00, #a00);
1007 background-image: -o-linear-gradient(top, #e00, #a00);
1008 background-image: linear-gradient(to bottom, #e00, #a00);
1012 .upload-errors .upload-error-message {
1016 word-wrap: break-word;
1025 background: rgba( 0, 86, 132, 0.9 );
1032 -webkit-transition: opacity 250ms;
1033 -moz-transition: opacity 250ms;
1034 -ms-transition: opacity 250ms;
1035 -o-transition: opacity 250ms;
1036 transition: opacity 250ms;
1039 .uploader-window-content {
1045 border: 1px dashed #fff;
1048 .uploader-window h3 {
1054 -webkit-transform: translateY( -50% );
1055 -moz-transform: translateY( -50% );
1056 -ms-transform: translateY( -50% );
1057 -o-transform: translateY( -50% );
1058 transform: translateY( -50% );
1065 .uploader-window .media-progress-bar {
1068 background: transparent;
1073 .uploader-window .media-progress-bar div {
1077 .uploading .uploader-window .media-progress-bar {
1081 .media-frame .uploader-inline {
1087 .uploader-inline-content {
1094 .uploader-inline-content .upload-ui {
1098 .uploader-inline-content .post-upload-ui {
1102 .uploader-inline .has-upload-message .upload-ui {
1106 .uploader-inline h3 {
1110 margin-bottom: 1.6em;
1113 .uploader-inline .has-upload-message .upload-instructions {
1116 font-weight: normal;
1119 .uploader-inline .drop-instructions {
1123 .supports-drag-drop .uploader-inline .drop-instructions {
1127 .uploader-inline p {
1131 .uploader-inline .media-progress-bar {
1135 .uploading.uploader-inline .media-progress-bar {
1139 .uploader-inline .browser {
1140 display: inline-block !important;
1152 padding: 0 0 0 16px;
1154 white-space: nowrap;
1157 .media-selection .selection-info {
1158 display: inline-block;
1162 vertical-align: top;
1165 .media-selection.empty,
1166 .media-selection.editing {
1170 .media-selection.one .edit-selection {
1174 .media-selection .count {
1182 .media-selection .selection-info a {
1186 margin: 1px 8px 1px -8px;
1188 text-decoration: none;
1189 border-right: 1px solid #dfdfdf;
1193 .media-selection .selection-info a:hover {
1194 background: #21759B;
1196 border-color: transparent;
1199 .media-selection .selection-info a:last-child {
1204 .media-selection .selection-info .clear-selection {
1208 .media-selection .selection-info .clear-selection:hover {
1212 .media-selection .selection-view {
1213 display: inline-block;
1214 vertical-align: top;
1217 .media-selection .attachments {
1218 display: inline-block;
1222 vertical-align: top;
1225 .media-selection .attachment .icon {
1229 .attachment.selection.selected {
1233 .attachment.selection.details {
1239 .media-selection .attachment.selection.details {
1245 .media-selection:after {
1253 background-image: -webkit-gradient(linear, right top, left top, from( rgba( 255, 255, 255, 1 ) ), to( rgba( 255, 255, 255, 0 ) ));
1254 background-image: -webkit-linear-gradient(right, rgba( 255, 255, 255, 1 ) , rgba( 255, 255, 255, 0 ) );
1255 background-image: -moz-linear-gradient(right, rgba( 255, 255, 255, 1 ) , rgba( 255, 255, 255, 0 ) );
1256 background-image: -o-linear-gradient(right, rgba( 255, 255, 255, 1 ) , rgba( 255, 255, 255, 0 ) );
1257 background-image: linear-gradient(to left, rgba( 255, 255, 255, 1 ) , rgba( 255, 255, 255, 0 ) );
1260 .media-selection .attachment .filename {
1268 .media-frame .spinner {
1269 background: url('../images/spinner.gif') no-repeat;
1270 background-size: 20px 20px;
1273 filter: alpha(opacity=70);
1279 .media-sidebar .settings-save-status {
1280 background: #f5f5f5;
1282 text-transform: none;
1286 .media-sidebar .settings-save-status .spinner {
1290 .media-sidebar .settings-save-status .saved {
1295 .media-sidebar .save-waiting .settings-save-status .spinner,
1296 .media-sidebar .save-complete .settings-save-status .saved {
1301 * Attachment Details
1303 .attachment-details {
1311 margin-bottom: 16px;
1314 border-bottom: 1px solid #e5e5e5;
1315 box-shadow: 0 1px 0 #fff;
1316 padding-bottom: 11px;
1319 .attachment-info .filename {
1322 word-wrap: break-word;
1325 .attachment-info .thumbnail {
1335 .uploading .attachment-info .thumbnail {
1338 box-shadow: inset 0 0 15px rgba( 0, 0, 0, 0.1 );
1341 .uploading .attachment-info .media-progress-bar {
1345 .attachment-info .thumbnail:after {
1353 box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
1357 .attachment-info .thumbnail img {
1364 .attachment-info .details {
1370 .attachment-info .edit-attachment,
1371 .attachment-info .refresh-attachment,
1372 .attachment-info .delete-attachment {
1374 text-decoration: none;
1375 white-space: nowrap;
1378 .attachment-info .refresh-attachment,
1379 .attachment-details.needs-refresh .attachment-info .edit-attachment {
1383 .attachment-details.needs-refresh .attachment-info .refresh-attachment,
1384 .attachment-info .edit-attachment {
1388 .attachment-info .delete-attachment {
1392 .attachment-info .delete-attachment:hover {
1397 * Attachment Display Settings
1399 .attachment-display-settings {
1405 .attachment-display-settings h4 {
1406 margin: 1.4em 0 0.4em;
1426 .media-frame .embed-url input {
1431 box-shadow: inset 2px 2px 4px -2px rgba( 0, 0, 0, 0.1 );
1434 .media-frame .embed-url .spinner {
1440 .media-frame .embed-loading .embed-url .spinner {
1444 .embed-link-settings,
1445 .embed-image-settings {
1451 padding: 16px 16px 32px;
1455 .media-embed .thumbnail {
1462 .media-embed .thumbnail img {
1467 .media-embed .thumbnail:after {
1475 box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
1479 .media-embed .setting {
1487 .media-embed .setting span {
1495 .media-embed .setting .button-group {
1499 .media-embed .setting input,
1500 .media-embed .setting textarea {
1510 .ie7 .media-frame .attachments-browser {
1514 .ie7 .media-frame .embed-url input {
1523 .ie7 .attachment-display-settings {
1527 .ie7 .attachment-preview,
1528 .ie7 .attachment-preview .thumbnail {
1533 .ie7 .media-frame .attachment .describe {
1537 .ie7 .media-sidebar .setting select {
1541 .ie7 .media-sidebar .setting input,
1542 .ie7 .media-sidebar .setting textarea {
1546 .ie7 .media-sidebar .setting .link-to-custom {
1555 .rtl .media-frame .search,
1556 .rtl .media-frame input[type="text"],
1557 .rtl .media-frame input[type="password"],
1558 .rtl .media-frame input[type="number"],
1559 .rtl .media-frame input[type="search"],
1560 .rtl .media-frame input[type="email"],
1561 .rtl .media-frame input[type="url"],
1562 .rtl .media-frame textarea,
1563 .rtl .media-frame select {
1564 font-family: Tahoma, sans-serif;
1567 :lang(he-il) .rtl .media-modal,
1568 :lang(he-il) .rtl .media-frame,
1569 :lang(he-il) .rtl .media-frame .search,
1570 :lang(he-il) .rtl .media-frame input[type="text"],
1571 :lang(he-il) .rtl .media-frame input[type="password"],
1572 :lang(he-il) .rtl .media-frame input[type="number"],
1573 :lang(he-il) .rtl .media-frame input[type="search"],
1574 :lang(he-il) .rtl .media-frame input[type="email"],
1575 :lang(he-il) .rtl .media-frame input[type="url"],
1576 :lang(he-il) .rtl .media-frame textarea,
1577 :lang(he-il) .rtl .media-frame select {
1578 font-family: Arial, sans-serif;
1584 @media only screen and (max-width: 960px) {
1585 .media-frame-content .media-toolbar-primary .search,
1586 .media-frame-content .media-toolbar-secondary .attachment-filters {
1594 @media only screen and (max-width: 900px) {
1604 .media-frame-router,
1605 .media-frame-content,
1606 .media-frame-toolbar {
1612 padding: 0 10px 24px;
1615 .attachments-browser .attachments,
1616 .attachments-browser .uploader-inline,
1617 .attachments-browser .media-toolbar {
1621 .media-sidebar .setting input,
1622 .media-sidebar .setting textarea,
1623 .media-sidebar .setting span,
1624 .compat-item label span {
1628 .media-sidebar .setting span,
1629 .compat-item label span {
1630 text-align: inherit;
1637 .media-sidebar .setting input,
1638 .media-sidebar .setting textarea,
1639 .media-sidebar .setting select {
1644 .media-sidebar .setting select.columns {
1649 .media-frame textarea,
1650 .media-frame .search {
1654 .media-frame-content .attachment .icon {
1662 .media-selection:after {
1666 .media-selection .attachments {
1670 .media-menu .separator {
1674 .media-modal-close {
1678 /* Text inputs need to be 16px, or they force zooming on iOS */
1679 .media-frame input[type="text"],
1680 .media-frame input[type="password"],
1681 .media-frame input[type="number"],
1682 .media-frame input[type="search"],
1683 .media-frame input[type="email"],
1684 .media-frame input[type="url"],
1685 .media-frame textarea,
1686 .media-frame select {
1691 /* Responsive on portrait and landscape */
1692 @media only screen and (max-width: 640px), screen and (max-height: 400px) {
1694 /* Media tabs on the top */
1695 .media-frame-content .media-toolbar .instructions {
1709 border-bottom: 1px solid #dddddd;
1711 padding: 10px 0 10px 10px;
1717 white-space: nowrap;
1718 text-overflow: ellipsis;
1722 .media-frame-title {
1726 .media-frame-toolbar {
1732 border-top: 1px solid #DEDEDE;
1743 .attachments-browser .attachments {
1747 .attachment-details h3 {
1751 /* Shorten right-side links so they don't overlap the close button */
1752 .media-menu a:nth-child(2),
1753 .media-menu a:last-child {
1757 .media-menu .separator {
1761 .media-frame-title {
1767 .media-frame-title h1 {
1772 .media-frame-router {
1777 .media-frame-content {
1782 .media-frame .attachments-browser {
1783 padding-bottom: 300px;
1787 border-bottom: 1px solid #dddddd;
1794 .media-toolbar-primary, .media-toolbar-secondary {
1798 .uploader-inline h3 {
1802 .uploader-inline-content {
1806 .uploader-inline-content .upload-ui {
1810 .attachments-browser .attachments, .attachments-browser .uploader-inline {
1812 margin-right: 180px;
1815 /* Full-bleed modal */
1824 .media-modal-backdrop {
1828 .attachments-browser .attachment,
1829 .attachments-browser .attachment-preview {
1833 .attachments-browser .media-toolbar-primary input.search {
1837 .uploader-inline-content {
1841 .media-sidebar .setting input[type="checkbox"],
1842 .media-sidebar .field input[type="checkbox"] {
1846 /* Image From Link */
1847 .embed-link-settings,
1848 .embed-image-settings {
1849 padding-bottom: 52px;
1853 .media-frame.hide-router .media-frame-content {
1858 .gallery-settings h3 {
1864 /* Landscape specific header override */
1865 @media screen and (max-height: 400px) {
1867 padding: 0 0 0 10px;
1873 white-space: nowrap;
1874 text-overflow: ellipsis;
1876 padding: 10px inherit;
1879 .media-menu a:nth-child(2),
1880 .media-menu a:last-child {
1884 .media-modal-close {
1888 .media-frame-router {
1892 .media-frame-content {
1896 .attachments-browser .attachments {
1900 /* Prevent unnecessary scrolling on title input */
1901 .embed-link-settings {
1906 @media only screen and (max-width: 680px) {
1907 .media-frame-content .media-toolbar .search,
1908 .media-frame-content .media-toolbar .attachment-filters {
1917 (-o-min-device-pixel-ratio: 5/4),
1918 (-webkit-min-device-pixel-ratio: 1.25),
1919 (min-resolution: 120dpi) {
1922 background-image: url(../images/uploader-icons-2x.png);
1923 background-size: 134px 15px;
1926 .media-frame .spinner {
1927 background-image: url('../images/spinner-2x.gif');