6 font-family: 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: 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;
58 -webkit-border-radius: 3px;
62 border-color: #dfdfdf;
70 .media-frame input:disabled,
71 .media-frame textarea:disabled,
72 .media-frame input[readonly],
73 .media-frame textarea[readonly] {
74 background-color: #eee;
77 .media-frame input[type="search"] {
78 -webkit-appearance: textfield;
81 .media-frame :-moz-placeholder {
85 /* Enable draggable on IE10 touch events until it's rolled into jQuery UI core */
88 -ms-touch-action: none;
103 .media-modal-backdrop {
123 .media-modal-close span {
128 background-position: -100px 0;
131 .media-modal-close:active {
135 .media-modal-content {
147 background-image: url(../images/uploader-icons.png);
148 background-repeat: no-repeat;
162 border: 0 solid #dfdfdf;
166 .media-toolbar-primary {
171 .media-toolbar-secondary {
176 .media-toolbar-primary > .media-button,
177 .media-toolbar-primary > .media-button-group {
183 .media-toolbar-secondary > .media-button,
184 .media-toolbar-secondary > .media-button-group {
199 padding: 0 16px 24px;
202 border-left: 1px solid #dfdfdf;
204 -webkit-overflow-scrolling: touch;
207 .hide-toolbar .media-sidebar {
211 .media-sidebar .sidebar-title {
215 padding: 12px 10px 10px;
219 .media-sidebar .sidebar-content {
221 margin-bottom: 130px;
224 .media-sidebar .search {
232 text-transform: uppercase;
235 text-shadow: 0 1px 0 #fff;
239 .media-sidebar .setting {
246 .media-sidebar .setting label {
250 .media-sidebar .setting .link-to-custom {
254 .media-sidebar .setting span {
260 .media-sidebar .setting select {
264 .media-sidebar .setting input[type="checkbox"] {
271 .media-sidebar .setting span,
272 .compat-item label span {
280 text-shadow: 0 1px 0 #fff;
283 .media-sidebar .setting input,
284 .media-sidebar .setting textarea {
289 .media-sidebar .setting textarea,
290 .compat-item .field textarea {
295 .media-sidebar select {
319 .compat-item .field {
325 .compat-item .label {
332 .compat-item .label span {
337 .compat-item .field {
343 .compat-item .field input {
360 border-right: 1px solid #d9d9d9;
361 box-shadow: inset -6px 0 6px -6px rgba( 0, 0, 0, 0.2 );
362 -webkit-user-select: none;
363 -moz-user-select: none;
364 -ms-user-select: none;
376 text-shadow: 0 1px 0 #fff;
377 text-decoration: none;
380 .media-menu > a:hover {
382 background: rgba( 0, 0, 0, 0.04 );
385 .media-menu > a:active {
390 .media-menu .active:hover {
395 .media-menu .separator {
399 border-top: 1px solid #dfdfdf;
400 border-bottom: 1px solid #fff;
411 -webkit-user-select: none;
412 -moz-user-select: none;
413 -ms-user-select: none;
425 border-right: 1px solid #dfdfdf;
426 text-shadow: 0 1px 0 #fff;
427 text-decoration: none;
430 .media-router > a:last-child {
434 .media-router > a:active,
435 .media-router > a:focus {
439 .media-router .active,
440 .media-router .active:hover {
444 .media-router .active:after {
447 margin: -100px auto 0;
451 box-shadow: 1px 1px 1px rgba( 0, 0, 0, 0.2 );
454 -webkit-transform: rotate( 45deg ) translate( 75px, 75px );
455 -moz-transform: rotate( 45deg ) translate( 75px, 75px );
456 -ms-transform: rotate( 45deg ) translate( 75px, 75px );
457 -o-transform: rotate( 45deg ) translate( 75px, 75px );
458 transform: rotate( 45deg ) translate( 75px, 75px );
491 .media-frame-router {
498 border-bottom: 1px solid #dfdfdf;
499 box-shadow: 0 4px 4px -4px rgba( 0, 0, 0, 0.1 );
502 .media-frame-content {
514 .media-frame-toolbar {
521 border: 0 solid #dfdfdf;
522 border-width: 1px 0 0 0;
523 box-shadow: 0 -4px 4px -4px rgba( 0, 0, 0, 0.1 );
526 .media-frame.hide-menu .media-frame-title,
527 .media-frame.hide-menu .media-frame-router,
528 .media-frame.hide-menu .media-frame-toolbar,
529 .media-frame.hide-menu .media-frame-content {
533 .media-frame.hide-menu .media-frame-menu {
537 .media-frame.hide-toolbar .media-frame-content {
541 .media-frame.hide-toolbar .media-frame-toolbar {
545 .media-frame.hide-router .media-frame-content {
549 .media-frame.hide-router .media-frame-router {
553 .media-frame.hide-router .media-frame-title {
554 border-bottom: 1px solid #dfdfdf;
555 box-shadow: 0 4px 4px -4px rgba( 0, 0, 0, 0.1 );
558 .media-frame .media-toolbar .add-to-gallery {
562 .media-frame-title h1 {
573 .media-frame .media-iframe {
577 .media-frame .media-iframe,
578 .media-frame .media-iframe iframe {
585 * Attachment Browser Filters
587 .media-frame select.attachment-filters {
595 .media-frame .search {
601 font-family: sans-serif;
602 -webkit-appearance: none;
605 .media-toolbar-secondary .search {
615 -webkit-overflow-scrolling: touch;
631 -webkit-user-select: none;
632 -moz-user-select: none;
633 -ms-user-select: none;
634 -o-user-select: none;
638 .selected.attachment {
644 .details.attachment {
650 .attachment-preview {
655 inset 0 0 15px rgba( 0, 0, 0, 0.1 ),
656 inset 0 0 0 1px rgba( 0, 0, 0, 0.05 );
667 .attachment .thumbnail {
678 .attachment-preview .thumbnail:after {
686 box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
690 .attachment .thumbnail img {
695 .attachment .thumbnail .centered {
701 -webkit-transform: translate( 50%, 50% );
702 -moz-transform: translate( 50%, 50% );
703 -ms-transform: translate( 50%, 50% );
704 -o-transform: translate( 50%, 50% );
705 transform: translate( 50%, 50% );
708 .attachment .thumbnail .centered img {
709 -webkit-transform: translate( -50%, -50% );
710 -moz-transform: translate( -50%, -50% );
711 -ms-transform: translate( -50%, -50% );
712 -o-transform: translate( -50%, -50% );
713 transform: translate( -50%, -50% );
716 .attachment .filename {
724 word-wrap: break-word;
727 background: rgba( 255, 255, 255, 0.8 );
728 box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
731 .attachment .filename div {
735 .attachment-preview .thumbnail {
740 .attachment .thumbnail img {
755 text-decoration: none;
757 background-color: #fff;
758 background-position: -96px 4px;
761 box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.3 );
764 .attachment .close:hover {
765 box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.6 );
768 .attachment:hover .close {
781 border: 1px solid #fff;
783 box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.4 );
786 background-image: -webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#e1e1e1));
787 background-image: -webkit-linear-gradient(top, #f1f1f1, #e1e1e1);
788 background-image: -moz-linear-gradient(top, #f1f1f1, #e1e1e1);
789 background-image: -o-linear-gradient(top, #f1f1f1, #e1e1e1);
790 background-image: linear-gradient(to bottom, #f1f1f1, #e1e1e1);
793 .attachment .check div {
794 background-position: -1px 0;
800 .attachment .check:hover div {
801 background-position: -40px 0;
804 .attachment.selected .check {
808 .attachment.details .check {
809 box-shadow: 0 0 0 1px #1e8cbe;
812 background-image: -webkit-gradient(linear, left top, left bottom, from(#1e8cbe), to(#0074a2));
813 background-image: -webkit-linear-gradient(top, #1e8cbe, #0074a2);
814 background-image: -moz-linear-gradient(top, #1e8cbe, #0074a2);
815 background-image: -o-linear-gradient(top, #1e8cbe, #0074a2);
816 background-image: linear-gradient(to bottom, #1e8cbe, #0074a2);
819 .attachment.details .check div {
820 background-position: -21px 0;
823 .attachment.details .check:hover div {
824 background-position: -60px 0;
827 .media-frame .attachment .describe {
838 * Attachments Browser
840 .media-frame .attachments-browser {
847 .attachments-browser .media-toolbar {
852 .attachments-browser .media-toolbar-primary > .media-button,
853 .attachments-browser .media-toolbar-primary > .media-button-group,
854 .attachments-browser .media-toolbar-secondary > .media-button,
855 .attachments-browser .media-toolbar-secondary > .media-button-group {
859 .attachments-browser .attachments,
860 .attachments-browser .uploader-inline {
869 .attachments-browser .instructions {
870 display: inline-block;
880 .media-progress-bar {
887 background: rgba( 0, 0, 0, 0.1 );
890 .media-progress-bar div {
895 background: rgba( 0, 0, 0, 0.2 );
897 -webkit-transition: width 300ms;
898 -moz-transition: width 300ms;
899 -ms-transition: width 300ms;
900 -o-transition: width 300ms;
901 transition: width 300ms;
904 .media-uploader-status .media-progress-bar {
909 .uploading.media-uploader-status .media-progress-bar {
913 .attachment-preview .media-progress-bar {
921 .media-uploader-status {
924 padding-bottom: 10px;
928 .media-sidebar .media-uploader-status {
929 border-bottom: 1px solid #dfdfdf;
930 box-shadow: 0 1px 0 #fff;
933 .uploader-inline .media-uploader-status h3 {
937 .media-uploader-status .upload-details {
941 text-shadow: 0 1px 0 #fff;
944 .uploading.media-uploader-status .upload-details {
948 .media-uploader-status .upload-detail-separator {
952 .media-uploader-status .upload-count {
956 .media-uploader-status .upload-dismiss-errors,
957 .media-uploader-status .upload-errors {
961 .errors.media-uploader-status .upload-dismiss-errors,
962 .errors.media-uploader-status .upload-errors {
966 .media-uploader-status .upload-dismiss-errors {
967 text-decoration: none;
970 .media-sidebar .media-uploader-status .upload-dismiss-errors {
976 .upload-errors .upload-error {
977 margin: 8px auto 0 auto;
979 border: 1px #c00 solid;
984 .upload-errors .upload-error-label {
990 background-image: -webkit-gradient(linear, left top, left bottom, from(#e00), to(#a00));
991 background-image: -webkit-linear-gradient(top, #e00, #a00);
992 background-image: -moz-linear-gradient(top, #e00, #a00);
993 background-image: -o-linear-gradient(top, #e00, #a00);
994 background-image: linear-gradient(to bottom, #e00, #a00);
998 .upload-errors .upload-error-message {
1002 word-wrap: break-word;
1011 background: rgba( 0, 86, 132, 0.9 );
1018 -webkit-transition: opacity 250ms;
1019 -moz-transition: opacity 250ms;
1020 -ms-transition: opacity 250ms;
1021 -o-transition: opacity 250ms;
1022 transition: opacity 250ms;
1025 .uploader-window-content {
1031 border: 1px dashed #fff;
1034 .uploader-window h3 {
1039 -webkit-transform: translateY( -50% );
1040 -moz-transform: translateY( -50% );
1041 -ms-transform: translateY( -50% );
1042 -o-transform: translateY( -50% );
1043 transform: translateY( -50% );
1051 .uploader-window .media-progress-bar {
1054 background: transparent;
1059 .uploader-window .media-progress-bar div {
1063 .uploading .uploader-window .media-progress-bar {
1067 .media-frame .uploader-inline {
1073 .uploader-inline-content {
1080 .uploader-inline-content .upload-ui {
1084 .uploader-inline-content .post-upload-ui {
1088 .uploader-inline .has-upload-message .upload-ui {
1092 .uploader-inline h3 {
1096 margin-bottom: 1.6em;
1099 .uploader-inline .has-upload-message .upload-instructions {
1102 font-weight: normal;
1105 .uploader-inline .drop-instructions {
1109 .supports-drag-drop .uploader-inline .drop-instructions {
1113 .uploader-inline p {
1117 .uploader-inline .media-progress-bar {
1121 .uploading.uploader-inline .media-progress-bar {
1125 .uploader-inline .browser {
1126 display: inline-block !important;
1138 padding: 0 0 0 16px;
1140 white-space: nowrap;
1143 .media-selection .selection-info {
1144 display: inline-block;
1148 vertical-align: top;
1151 .media-selection.empty,
1152 .media-selection.editing {
1156 .media-selection.one .edit-selection {
1160 .media-selection .count {
1168 .media-selection .selection-info a {
1172 margin: 1px 8px 1px -8px;
1174 text-decoration: none;
1175 border-right: 1px solid #dfdfdf;
1179 .media-selection .selection-info a:hover {
1180 background: #21759B;
1182 border-color: transparent;
1185 .media-selection .selection-info a:last-child {
1190 .media-selection .selection-info .clear-selection {
1194 .media-selection .selection-info .clear-selection:hover {
1198 .media-selection .selection-view {
1199 display: inline-block;
1200 vertical-align: top;
1203 .media-selection .attachments {
1204 display: inline-block;
1208 vertical-align: top;
1211 .media-selection .attachment .icon {
1215 .attachment.selection.selected {
1219 .attachment.selection.details {
1225 .media-selection .attachment.selection.details {
1231 .media-selection:after {
1239 background-image: -webkit-gradient(linear, right top, left top, from( rgba( 255, 255, 255, 1 ) ), to( rgba( 255, 255, 255, 0 ) ));
1240 background-image: -webkit-linear-gradient(right, rgba( 255, 255, 255, 1 ) , rgba( 255, 255, 255, 0 ) );
1241 background-image: -moz-linear-gradient(right, rgba( 255, 255, 255, 1 ) , rgba( 255, 255, 255, 0 ) );
1242 background-image: -o-linear-gradient(right, rgba( 255, 255, 255, 1 ) , rgba( 255, 255, 255, 0 ) );
1243 background-image: linear-gradient(to left, rgba( 255, 255, 255, 1 ) , rgba( 255, 255, 255, 0 ) );
1246 .media-selection .attachment .filename {
1254 .media-frame .spinner {
1255 background: url(../images/wpspin.gif) no-repeat;
1256 background-size: 16px 16px;
1259 filter: alpha(opacity=70);
1265 .media-sidebar .settings-save-status {
1266 background: #f5f5f5;
1268 text-transform: none;
1272 .media-sidebar .settings-save-status .spinner {
1276 .media-sidebar .settings-save-status .saved {
1281 .media-sidebar .save-waiting .settings-save-status .spinner,
1282 .media-sidebar .save-complete .settings-save-status .saved {
1287 * Attachment Details
1289 .attachment-details {
1297 margin-bottom: 16px;
1300 border-bottom: 1px solid #e5e5e5;
1301 box-shadow: 0 1px 0 #fff;
1302 padding-bottom: 11px;
1305 .attachment-info .filename {
1308 word-wrap: break-word;
1311 .attachment-info .thumbnail {
1321 .uploading .attachment-info .thumbnail {
1324 box-shadow: inset 0 0 15px rgba( 0, 0, 0, 0.1 );
1327 .uploading .attachment-info .media-progress-bar {
1331 .attachment-info .thumbnail:after {
1339 box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
1343 .attachment-info .thumbnail img {
1350 .attachment-info .details {
1356 .attachment-info .edit-attachment,
1357 .attachment-info .refresh-attachment,
1358 .attachment-info .delete-attachment {
1360 text-decoration: none;
1361 white-space: nowrap;
1364 .attachment-info .refresh-attachment,
1365 .attachment-details.needs-refresh .attachment-info .edit-attachment {
1369 .attachment-details.needs-refresh .attachment-info .refresh-attachment,
1370 .attachment-info .edit-attachment {
1374 .attachment-info .delete-attachment {
1378 .attachment-info .delete-attachment:hover {
1383 * Attachment Display Settings
1385 .attachment-display-settings {
1391 .attachment-display-settings h4 {
1392 margin: 1.4em 0 0.4em;
1405 padding: 0 16px 7px;
1409 border-bottom: 1px solid #dfdfdf;
1410 box-shadow: 0 4px 4px -4px rgba( 0, 0, 0, 0.1 );
1415 .media-frame .embed-url input {
1420 box-shadow: inset 2px 2px 4px -2px rgba( 0, 0, 0, 0.1 );
1423 .media-frame .embed-url .spinner {
1429 .media-frame .embed-loading .embed-url .spinner {
1433 .embed-link-settings,
1434 .embed-image-settings {
1436 background: #f5f5f5;
1441 padding: 16px 16px 32px;
1445 .media-embed .thumbnail {
1452 .media-embed .thumbnail img {
1457 .media-embed .thumbnail:after {
1465 box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
1469 .media-embed .setting {
1477 .media-embed .setting span {
1483 text-shadow: 0 1px 0 #fff;
1486 .media-embed .setting .button-group {
1490 .media-embed .setting input,
1491 .media-embed .setting textarea {
1501 .ie7 .media-frame .attachments-browser {
1505 .ie7 .media-frame .embed-url input {
1514 .ie7 .attachment-display-settings {
1518 .ie7 .attachment-preview,
1519 .ie7 .attachment-preview .thumbnail {
1524 .ie7 .media-frame .attachment .describe {
1528 .ie7 .media-sidebar .setting select {
1532 .ie7 .media-sidebar .setting input,
1533 .ie7 .media-sidebar .setting textarea {
1537 .ie7 .media-sidebar .setting .link-to-custom {
1541 @media only screen and (max-width: 960px) {
1542 .media-frame-content .media-toolbar-primary .search,
1543 .media-frame-content .media-toolbar-secondary .attachment-filters {
1551 @media only screen and (max-width: 900px) {
1561 .media-frame-router,
1562 .media-frame-content,
1563 .media-frame-toolbar {
1569 padding: 0 10px 24px;
1572 .attachments-browser .attachments,
1573 .attachments-browser .uploader-inline,
1574 .attachments-browser .media-toolbar {
1578 .media-sidebar .setting input,
1579 .media-sidebar .setting textarea,
1580 .media-sidebar .setting span,
1581 .compat-item label span {
1585 .media-sidebar .setting span,
1586 .compat-item label span {
1587 text-align: inherit;
1594 .media-sidebar .setting input,
1595 .media-sidebar .setting textarea,
1596 .media-sidebar .setting select {
1601 .media-sidebar .setting select.columns {
1606 .media-frame textarea,
1607 .media-frame .search {
1611 .media-frame-content .attachment .icon {
1619 .media-selection:after {
1623 .media-selection .attachments {
1627 .media-menu .separator {
1632 @media only screen and (max-width: 800px) {
1633 .media-frame-content .media-toolbar .instructions {
1638 @media only screen and (max-width: 680px) {
1639 .media-frame-content .media-toolbar .search,
1640 .media-frame-content .media-toolbar .attachment-filters {
1645 /* Use the same min-width as in the admin */
1646 @media only screen and (max-width: 600px) {
1652 .media-modal-backdrop {
1662 (-o-min-device-pixel-ratio: 5/4),
1663 (-webkit-min-device-pixel-ratio: 1.25),
1664 (min-resolution: 120dpi) {
1666 background-image: url(../images/uploader-icons-2x.png);
1667 background-size: 134px 15px;
1670 .media-frame .spinner {
1671 background-image: url(../images/wpspin-2x.gif);