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;
22 -webkit-overflow-scrolling: touch;
26 .media-frame textarea {
31 .wp-admin .media-frame select {
41 .media-frame a:hover {
45 .media-frame a.button {
49 .media-frame a.button:hover {
53 .media-frame a.button-primary,
54 .media-frame a.button-primary:hover {
58 .media-frame input[type="text"],
59 .media-frame input[type="password"],
60 .media-frame input[type="number"],
61 .media-frame input[type="search"],
62 .media-frame input[type="email"],
63 .media-frame input[type="url"],
64 .media-frame textarea,
66 font-family: "Open Sans", sans-serif;
70 border-color: #dfdfdf;
73 .media-frame input[type="text"]:focus,
74 .media-frame input[type="password"]:focus,
75 .media-frame input[type="number"]:focus,
76 .media-frame input[type="search"]:focus,
77 .media-frame input[type="email"]:focus,
78 .media-frame input[type="url"]:focus,
79 .media-frame textarea:focus,
80 .media-frame select:focus {
81 border-color: #5b9dd9;
89 .media-frame input:disabled,
90 .media-frame textarea:disabled,
91 .media-frame input[readonly],
92 .media-frame textarea[readonly] {
93 background-color: #eee;
96 .media-frame input[type="search"] {
97 -webkit-appearance: textfield;
100 .media-frame :-moz-placeholder {
104 .media-frame .hidden {
109 * jQuery UI Draggable/Sortable 1.11.4
110 * http://jqueryui.com
112 * Copyright jQuery Foundation and other contributors
113 * Released under the MIT license.
114 * http://jquery.org/license
116 .ui-draggable-handle,
117 .ui-sortable-handle {
118 -ms-touch-action: none;
134 .wp-customizer .media-modal {
138 .media-modal-backdrop {
150 .wp-customizer .media-modal-backdrop {
156 text-decoration: none;
162 -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
163 transition: color .1s ease-in-out, background .1s ease-in-out;
166 .media-modal-close:active {
167 -webkit-box-shadow: none;
171 .media-modal-close span.media-modal-icon {
176 background-image: none;
180 .media-modal-close .media-modal-icon:before {
182 font: normal 20px/1 'dashicons';
184 vertical-align: middle;
185 -webkit-font-smoothing: antialiased;
186 -moz-osx-font-smoothing: grayscale;
190 .media-modal-close:hover .media-modal-icon:before {
194 .media-modal-close:active {
198 .media-modal-content {
206 -webkit-box-shadow: 0 5px 15px rgba(0,0,0,0.7);
207 box-shadow: 0 5px 15px rgba(0,0,0,0.7);
209 -webkit-font-smoothing: subpixel-antialiased;
213 background-image: url(../images/uploader-icons.png);
214 background-repeat: no-repeat;
228 border: 0 solid #dfdfdf;
232 .media-toolbar-primary {
237 .media-toolbar-secondary {
242 .media-toolbar-primary > .media-button,
243 .media-toolbar-primary > .media-button-group {
249 .media-toolbar-secondary > .media-button,
250 .media-toolbar-secondary > .media-button-group {
264 padding: 0 16px 24px;
267 border-left: 1px solid #ddd;
269 -webkit-overflow-scrolling: touch;
272 .hide-toolbar .media-sidebar {
276 .media-sidebar .sidebar-title {
279 padding: 12px 10px 10px;
283 .media-sidebar .sidebar-content {
285 margin-bottom: 130px;
288 .media-sidebar .search {
297 text-transform: uppercase;
303 .media-sidebar .setting,
304 .attachment-details .setting {
311 .media-sidebar .setting label,
312 .attachment-details .setting label {
316 .media-sidebar .setting .link-to-custom,
317 .attachment-details .setting .link-to-custom {
321 .media-sidebar .setting span,
322 .attachment-details .setting span {
327 word-wrap: break-word;
330 .media-sidebar .setting .name {
334 .media-sidebar .setting select,
335 .attachment-details .setting select {
339 .media-sidebar .setting input[type="checkbox"],
340 .media-sidebar .field input[type="checkbox"],
341 .media-sidebar .setting input[type="radio"],
342 .media-sidebar .field input[type="radio"],
343 .attachment-details .setting input[type="checkbox"],
344 .attachment-details .field input[type="checkbox"],
345 .attachment-details .setting input[type="radio"],
346 .attachment-details .field input[type="radio"] {
352 .media-sidebar .setting span,
353 .attachment-details .setting span,
354 .compat-item label span {
363 .compat-item label span {
367 .media-sidebar .setting input[type="text"],
368 .media-sidebar .setting input[type="password"],
369 .media-sidebar .setting input[type="email"],
370 .media-sidebar .setting input[type="number"],
371 .media-sidebar .setting input[type="search"],
372 .media-sidebar .setting input[type="tel"],
373 .media-sidebar .setting input[type="url"],
374 .media-sidebar .setting textarea,
375 .media-sidebar .setting .value,
376 .attachment-details .setting input[type="text"],
377 .attachment-details .setting input[type="password"],
378 .attachment-details .setting input[type="email"],
379 .attachment-details .setting input[type="number"],
380 .attachment-details .setting input[type="search"],
381 .attachment-details .setting input[type="tel"],
382 .attachment-details .setting input[type="url"],
383 .attachment-details .setting textarea,
384 .attachment-details .setting .value {
385 -webkit-box-sizing: border-box;
386 -moz-box-sizing: border-box;
387 box-sizing: border-box;
393 .media-sidebar .setting .value,
394 .attachment-details .setting .value {
399 .media-sidebar .setting textarea,
400 .attachment-details .setting textarea,
401 .compat-item .field textarea {
406 .media-sidebar select,
407 .attachment-details select {
431 .compat-item .field {
437 .compat-item .label {
444 .compat-item .label span {
449 .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"],
462 .compat-item .field textarea {
465 -webkit-box-sizing: border-box;
466 -moz-box-sizing: border-box;
467 box-sizing: border-box;
470 .sidebar-for-errors .attachment-details,
471 .sidebar-for-errors .compat-item,
472 .sidebar-for-errors .media-sidebar .media-progress-bar,
473 .sidebar-for-errors .upload-details {
474 display: none !important;
489 border-right-width: 1px;
490 border-right-style: solid;
491 border-right-color: #ccc;
492 -webkit-user-select: none;
493 -moz-user-select: none;
494 -ms-user-select: none;
506 text-decoration: none;
509 .media-menu > a:hover {
511 background: rgba( 0, 0, 0, 0.04 );
514 .media-menu > a:active {
519 .media-menu .active:hover {
524 .media-menu .separator {
528 border-top: 1px solid #ddd;
539 -webkit-user-select: none;
540 -moz-user-select: none;
541 -ms-user-select: none;
546 -webkit-transition: none;
553 padding: 8px 10px 9px;
558 text-decoration: none;
561 .media-router > a:last-child {
565 .media-router > a:active {
569 .media-router .active,
570 .media-router .active:hover {
574 .media-router .active,
575 .media-router > a.active:last-child {
578 border: 1px solid #ddd;
582 .media-router .active:after {
616 .media-frame-router {
625 .media-frame-content {
636 border-top: 1px solid #ddd;
637 border-bottom: 1px solid #ddd;
640 .media-frame-toolbar {
649 .media-frame.hide-menu .media-frame-title,
650 .media-frame.hide-menu .media-frame-router,
651 .media-frame.hide-menu .media-frame-toolbar,
652 .media-frame.hide-menu .media-frame-content {
656 .media-frame.hide-menu .media-frame-menu {
660 .media-frame.hide-toolbar .media-frame-content {
664 .media-frame.hide-toolbar .media-frame-toolbar {
668 .media-frame.hide-router .media-frame-content {
672 .media-frame.hide-router .media-frame-router {
676 .media-frame.hide-router .media-frame-title {
677 border-bottom: 1px solid #dfdfdf;
678 -webkit-box-shadow: 0 4px 4px -4px rgba( 0, 0, 0, 0.1 );
679 box-shadow: 0 4px 4px -4px rgba( 0, 0, 0, 0.1 );
682 .media-frame-title .dashicons {
686 .media-frame-title h1 {
693 .media-frame-title .suggested-dimensions {
699 .media-frame-content .crop-content {
703 .media-frame-content .crop-content .crop-image {
710 .media-frame-content .crop-content .upload-errors
717 margin-right: -150px;
724 .media-frame .media-iframe {
728 .media-frame .media-iframe,
729 .media-frame .media-iframe iframe {
736 * Attachment Browser Filters
738 .media-frame select.attachment-filters {
742 max-width: -webkit-calc(48% - 12px);
743 max-width: calc(48% - 12px);
746 .media-frame select.attachment-filters:last-of-type {
753 .media-frame .search {
758 font-family: "Open Sans", sans-serif;
759 -webkit-appearance: none;
762 .media-toolbar-primary .search {
769 .wp-core-ui .attachments {
771 -webkit-overflow-scrolling: touch;
777 .wp-core-ui .attachment {
786 -webkit-user-select: none;
787 -moz-user-select: none;
788 -ms-user-select: none;
791 -webkit-box-sizing: border-box;
792 -moz-box-sizing: border-box;
793 box-sizing: border-box;
796 .wp-core-ui .attachment:focus,
797 .wp-core-ui .selected.attachment:focus,
798 .wp-core-ui .attachment.details:focus {
800 inset 0 0 2px 3px #fff,
801 inset 0 0 0 7px #5b9dd9;
803 inset 0 0 2px 3px #fff,
804 inset 0 0 0 7px #5b9dd9;
808 .wp-core-ui .selected.attachment {
810 inset 0 0 0 5px #fff,
811 inset 0 0 0 7px #ccc;
813 inset 0 0 0 5px #fff,
814 inset 0 0 0 7px #ccc;
817 .wp-core-ui .attachment.details {
819 inset 0 0 0 3px #fff,
820 inset 0 0 0 7px #1e8cbe;
822 inset 0 0 0 3px #fff,
823 inset 0 0 0 7px #1e8cbe;
826 .wp-core-ui .attachment-preview {
829 inset 0 0 15px rgba( 0, 0, 0, 0.1 ),
830 inset 0 0 0 1px rgba( 0, 0, 0, 0.05 );
832 inset 0 0 15px rgba( 0, 0, 0, 0.1 ),
833 inset 0 0 0 1px rgba( 0, 0, 0, 0.05 );
838 .wp-core-ui .attachment-preview:before {
844 .wp-core-ui .attachment .icon {
849 .wp-core-ui .attachment .thumbnail {
857 -webkit-transition: opacity .1s;
858 transition: opacity .1s;
861 .wp-core-ui .attachment .portrait img {
865 .wp-core-ui .attachment .landscape img {
869 .wp-core-ui .attachment .thumbnail:after {
877 -webkit-box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
878 box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
882 .wp-core-ui .attachment .thumbnail img {
887 .wp-core-ui .attachment .thumbnail .centered {
893 -webkit-transform: translate( 50%, 50% );
894 -ms-transform: translate(50%,50%); /* Fails with spaces?? Weird! */
895 transform: translate( 50%, 50% );
898 .wp-core-ui .attachment .thumbnail .centered img {
899 -webkit-transform: translate( -50%, -50% );
900 -ms-transform: translate(-50%,-50%);
901 transform: translate( -50%, -50% );
904 .wp-core-ui .attachments-browser .attachment .thumbnail .centered img.icon {
905 -webkit-transform: translate( -50%, -70% );
906 -ms-transform: translate(-50%,-70%);
907 transform: translate( -50%, -70% );
910 .ie8 .wp-core-ui .attachment img.icon {
915 .wp-core-ui .attachment .filename {
922 word-wrap: break-word;
925 background: rgba( 255, 255, 255, 0.8 );
926 -webkit-box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
927 box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
930 .wp-core-ui .attachment .filename div {
934 .wp-core-ui .attachment .thumbnail img {
938 .wp-core-ui .attachment .close {
949 text-decoration: none;
951 background-color: #fff;
952 background-position: -96px 4px;
954 -webkit-border-radius: 3px;
956 -webkit-box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.3 );
957 box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.3 );
958 -webkit-transition-duration: none;
959 transition-duration: none;
960 -webkit-transition-property: none;
961 transition-property: none;
964 .wp-core-ui .attachment a.close:hover,
965 .wp-core-ui .attachment a.close:focus {
966 -webkit-box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.6 );
967 box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.6 );
968 background-position: -36px 4px;
972 .wp-core-ui .attachment .check {
982 -webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba( 0, 0, 0, 0.15 );
983 box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba( 0, 0, 0, 0.15 );
986 .wp-core-ui .attachment .check div {
987 background-position: -1px 0;
993 .wp-core-ui .attachment .check:hover div {
994 background-position: -40px 0;
997 .wp-core-ui .attachment.selected .check {
1001 .wp-core-ui .attachment.details .check,
1002 .wp-core-ui .attachment.selected .check:focus,
1003 .wp-core-ui .media-frame.mode-grid .attachment.selected .check {
1004 background-color: #1e8cbe;
1013 .wp-core-ui .attachment.details .check div,
1014 .wp-core-ui .media-frame.mode-grid .attachment.selected .check div {
1015 background-position: -21px 0;
1018 .wp-core-ui .attachment.details .check:hover div,
1019 .wp-core-ui .attachment.selected .check:focus div,
1020 .wp-core-ui .media-frame.mode-grid .attachment.selected .check:hover div {
1021 background-position: -60px 0;
1024 .wp-core-ui .media-frame .attachment .describe {
1031 -webkit-border-radius: 0;
1036 * Attachments Browser
1038 .media-frame .attachments-browser {
1045 .attachments-browser .media-toolbar {
1050 .attachments-browser.hide-sidebar .media-toolbar {
1054 .attachments-browser .media-toolbar-primary > .media-button,
1055 .attachments-browser .media-toolbar-primary > .media-button-group,
1056 .attachments-browser .media-toolbar-secondary > .media-button,
1057 .attachments-browser .media-toolbar-secondary > .media-button-group {
1061 .attachments-browser .attachments {
1062 padding: 2px 8px 8px;
1065 .attachments-browser .attachments,
1066 .attachments-browser .uploader-inline {
1076 .attachments-browser .uploader-inline.hidden {
1080 .attachments-browser .media-toolbar-primary {
1084 .attachments-browser .media-toolbar-secondary {
1088 .uploader-inline .close {
1089 background-color: transparent;
1101 .uploader-inline .close:before {
1102 font: normal 30px/50px 'dashicons' !important;
1104 display: inline-block;
1109 .attachments-browser.hide-sidebar .attachments,
1110 .attachments-browser.hide-sidebar .uploader-inline {
1115 .attachments-browser .instructions {
1116 display: inline-block;
1121 margin-right: 0.5em;
1124 .attachments-browser .no-media {
1125 padding: 2em 0 0 2em;
1131 .media-progress-bar {
1136 -webkit-border-radius: 10px;
1137 border-radius: 10px;
1138 background: #dfdfdf;
1139 background: rgba( 0, 0, 0, 0.1 );
1142 .media-progress-bar div {
1146 background: #1e8cbe;
1147 -webkit-border-radius: 10px;
1148 border-radius: 10px;
1149 -webkit-transition: width 300ms;
1150 transition: width 300ms;
1153 .media-uploader-status .media-progress-bar {
1158 .uploading.media-uploader-status .media-progress-bar {
1162 .attachment-preview .media-progress-bar {
1170 .media-uploader-status {
1173 padding-bottom: 10px;
1177 .media-sidebar .media-uploader-status {
1178 border-bottom: 1px solid #dfdfdf;
1181 .uploader-inline .media-uploader-status h3 {
1185 .media-uploader-status .upload-details {
1191 .uploading.media-uploader-status .upload-details {
1195 .media-uploader-status .upload-detail-separator {
1199 .media-uploader-status .upload-count {
1203 .media-uploader-status .upload-dismiss-errors,
1204 .media-uploader-status .upload-errors {
1208 .errors.media-uploader-status .upload-dismiss-errors,
1209 .errors.media-uploader-status .upload-errors {
1213 .media-uploader-status .upload-dismiss-errors {
1214 text-decoration: none;
1217 .media-sidebar .media-uploader-status .upload-dismiss-errors {
1223 .upload-errors .upload-error {
1224 margin: 8px auto 0 auto;
1226 border: 1px #c00 solid;
1227 background: #ffebe8;
1228 -webkit-border-radius: 3px;
1232 .upload-errors .upload-error-label {
1238 background-image: -webkit-gradient(linear, left top, left bottom, from(#e00), to(#a00));
1239 background-image: -webkit-linear-gradient(top, #e00, #a00);
1240 background-image: linear-gradient(to bottom, #e00, #a00);
1241 -webkit-border-radius: 3px;
1245 .upload-errors .upload-error-message {
1249 word-wrap: break-word;
1258 background: rgba( 0, 86, 132, 0.9 );
1263 -webkit-transition: opacity 250ms;
1264 transition: opacity 250ms;
1267 .uploader-window-content {
1273 border: 1px dashed #fff;
1276 .uploader-window h3 {
1282 -webkit-transform: translateY( -50% );
1283 -ms-transform: translateY(-50%);
1284 transform: translateY( -50% );
1290 .uploader-window .media-progress-bar {
1293 background: transparent;
1298 .uploader-window .media-progress-bar div {
1302 .uploading .uploader-window .media-progress-bar {
1306 .media-frame .uploader-inline {
1307 margin-bottom: 20px;
1312 .uploader-inline-content {
1319 .uploader-inline-content .upload-ui {
1323 .uploader-inline-content .post-upload-ui {
1327 .uploader-inline .has-upload-message .upload-ui {
1331 .uploader-inline h3 {
1338 .uploader-inline .has-upload-message .upload-instructions {
1341 font-weight: normal;
1344 .uploader-inline .drop-instructions {
1348 .supports-drag-drop .uploader-inline .drop-instructions {
1352 .uploader-inline p {
1357 .uploader-inline .media-progress-bar {
1361 .uploading.uploader-inline .media-progress-bar {
1365 .uploader-inline .browser {
1366 display: inline-block !important;
1378 padding: 0 0 0 16px;
1380 white-space: nowrap;
1383 .media-selection .selection-info {
1384 display: inline-block;
1388 vertical-align: top;
1391 .media-selection.empty,
1392 .media-selection.editing {
1396 .media-selection.one .edit-selection {
1400 .media-selection .count {
1408 .media-selection .selection-info a {
1412 margin: 1px 8px 1px -8px;
1414 text-decoration: none;
1415 border-right: 1px solid #dfdfdf;
1419 .media-selection .selection-info a:hover {
1420 background: #21759B;
1422 border-color: transparent;
1425 .media-selection .selection-info a:last-child {
1430 .media-selection .selection-info .clear-selection {
1434 .media-selection .selection-info .clear-selection:hover {
1438 .media-selection .selection-view {
1439 display: inline-block;
1440 vertical-align: top;
1443 .media-selection .attachments {
1444 display: inline-block;
1449 vertical-align: top;
1452 .media-selection .attachment {
1458 .media-selection .attachment .thumbnail {
1465 .media-selection .attachment .icon {
1469 .media-selection .attachment-preview {
1470 -webkit-box-shadow: none;
1475 .wp-core-ui .media-selection .attachment:focus,
1476 .wp-core-ui .media-selection .selected.attachment:focus,
1477 .wp-core-ui .media-selection .attachment.details:focus {
1480 0 0 2px 3px #5b9dd9;
1483 0 0 2px 3px #5b9dd9;
1486 .wp-core-ui .media-selection .selected.attachment {
1487 -webkit-box-shadow: none;
1491 .wp-core-ui .media-selection .attachment.details {
1500 .media-selection:after {
1508 background-image: -webkit-gradient(linear, right top, left top, from(rgba( 255, 255, 255, 1 )), to(rgba( 255, 255, 255, 0 )));
1509 background-image: -webkit-linear-gradient(right, rgba( 255, 255, 255, 1 ), rgba( 255, 255, 255, 0 ));
1510 background-image: linear-gradient(to left, rgba( 255, 255, 255, 1 ) , rgba( 255, 255, 255, 0 ) );
1513 .media-selection .attachment .filename {
1520 .media-frame .spinner {
1521 background: url(../images/spinner.gif) no-repeat;
1522 -webkit-background-size: 20px 20px;
1523 background-size: 20px 20px;
1525 display: inline-block;
1528 filter: alpha(opacity=70);
1532 vertical-align: middle;
1535 .media-frame .spinner.is-active {
1536 visibility: visible;
1539 .media-toolbar .spinner {
1544 * Attachment Details
1546 .attachment-details {
1551 .attachment-details .settings-save-status {
1553 text-transform: none;
1557 .attachment-details .settings-save-status .spinner {
1561 .attachment-details .settings-save-status .saved {
1566 .attachment-details.save-waiting .settings-save-status .spinner {
1567 visibility: visible;
1570 .attachment-details.save-complete .settings-save-status .saved {
1577 margin-bottom: 16px;
1580 border-bottom: 1px solid #ddd;
1581 padding-bottom: 11px;
1584 .attachment-info .filename {
1587 word-wrap: break-word;
1590 .attachment-info .thumbnail {
1600 .uploading .attachment-info .thumbnail {
1603 -webkit-box-shadow: inset 0 0 15px rgba( 0, 0, 0, 0.1 );
1604 box-shadow: inset 0 0 15px rgba( 0, 0, 0, 0.1 );
1607 .uploading .attachment-info .media-progress-bar {
1611 .attachment-info .thumbnail-image:after {
1619 -webkit-box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
1620 box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
1624 .attachment-info .thumbnail img {
1631 .attachment-info .details {
1637 .attachment-info .edit-attachment,
1638 .attachment-info .refresh-attachment,
1639 .attachment-info .delete-attachment,
1640 .attachment-info .trash-attachment,
1641 .attachment-info .untrash-attachment {
1643 text-decoration: none;
1644 white-space: nowrap;
1647 .attachment-info .refresh-attachment,
1648 .attachment-details.needs-refresh .attachment-info .edit-attachment {
1652 .attachment-details.needs-refresh .attachment-info .refresh-attachment,
1653 .attachment-info .edit-attachment {
1657 .media-modal .delete-attachment,
1658 .media-modal .trash-attachment,
1659 .media-modal .untrash-attachment {
1663 .media-modal .delete-attachment:hover,
1664 .media-modal .trash-attachment:hover,
1665 .media-modal .untrash-attachment:hover {
1670 * Attachment Display Settings
1672 .attachment-display-settings {
1678 .attachment-display-settings h4 {
1679 margin: 1.4em 0 0.4em;
1682 .collection-settings {
1686 .collection-settings .setting input[type="checkbox"] {
1691 .collection-settings .setting span {
1698 .media-modal .imgedit-wrap {
1702 .media-modal .imgedit-wait {
1703 height: auto !important;
1709 .media-modal .imgedit-wrap .imgedit-panel-content {
1719 .media-modal .imgedit-wrap .imgedit-settings {
1720 background: #f3f3f3;
1721 border-left: 1px solid #ddd;
1722 padding: 0 16px 16px;
1731 .media-modal .imgedit-group {
1734 border-bottom: 1px solid #ddd;
1735 -webkit-box-shadow: none;
1738 margin-bottom: 16px;
1740 padding-bottom: 16px;
1741 position: relative; /* RTL fix, #WP29352 */
1744 .media-modal .imgedit-group:last-of-type {
1750 .media-modal .imgedit-group-top h3 {
1751 text-transform: uppercase;
1758 .media-modal .imgedit-group-top h3 a {
1759 text-decoration: none;
1763 .media-modal .imgedit-help-toggle {
1769 .media-modal .imgedit-help-toggled span.dashicons:before {
1773 .media-modal .imgedit-group img {
1777 .media-modal .imgedit-wrap div.updated {
1779 margin-bottom: 16px;
1784 * Embed from URL and Image Details
1796 .media-frame .embed-url input {
1801 -webkit-box-shadow: inset 2px 2px 4px -2px rgba( 0, 0, 0, 0.1 );
1802 box-shadow: inset 2px 2px 4px -2px rgba( 0, 0, 0, 0.1 );
1805 .media-frame .embed-url .spinner {
1811 .media-frame .embed-loading .embed-url .spinner {
1812 visibility: visible;
1815 .embed-link-settings,
1816 .embed-media-settings {
1822 padding: 16px 16px 32px;
1827 .embed-preview iframe,
1828 .embed-preview embed {
1833 display: inline-block;
1836 .embed-preview img {
1841 .image-details .media-modal {
1846 .image-details .media-frame-title,
1847 .image-details .media-frame-content,
1848 .image-details .media-frame-router {
1852 .image-details .embed-media-settings {
1858 .image-details .embed-media-settings,
1859 .image-details .embed-media-settings div {
1860 -webkit-box-sizing: border-box;
1861 -moz-box-sizing: border-box;
1862 box-sizing: border-box;
1865 .image-details .column-settings {
1866 background: #f3f3f3;
1867 border-right: 1px solid #ddd;
1875 .image-details .column-settings h3 {
1878 border-top: 1px solid #ddd;
1881 .image-details .column-image {
1888 .image-details .image {
1892 .image-details .image img {
1897 .image-details .advanced-toggle {
1899 text-decoration: none;
1903 .image-details .advanced-toggle:after {
1904 font: normal 20px/1 'dashicons';
1906 vertical-align: top;
1907 -webkit-font-smoothing: antialiased;
1908 -moz-osx-font-smoothing: grayscale;
1910 display: inline-block;
1914 .image-details .advanced-visible .advanced-toggle:after {
1918 .image-details .embed-media-settings .size {
1922 .image-details .custom-size span {
1926 .image-details .custom-size label {
1931 .image-details .custom-size span small {
1936 .image-details .custom-size input {
1940 .image-details .custom-size .sep {
1942 margin: 26px 6px 0 6px;
1945 .image-details .custom-size:after {
1951 .media-embed .thumbnail {
1958 .media-embed .thumbnail img {
1963 .media-embed .thumbnail:after {
1971 -webkit-box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
1972 box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
1976 .media-embed .setting {
1984 .image-details .embed-media-settings .setting {
1989 .image-details .actions {
1993 .image-details .hidden {
1997 .media-embed .setting input[type="text"],
1998 .media-embed .setting textarea {
2005 .image-details .embed-media-settings .setting input[type="text"],
2006 .image-details .embed-media-settings .setting textarea {
2011 .image-details .embed-media-settings .setting input.link-to-custom,
2012 .image-details .embed-media-settings .link-target,
2013 .image-details .embed-media-settings .custom-size {
2018 .image-details .embed-media-settings .link-target {
2022 .media-embed .setting input.hidden,
2023 .media-embed .setting textarea.hidden {
2027 .media-embed .setting span {
2035 .image-details .embed-media-settings .setting span {
2039 margin: 8px 1% 0 1%;
2043 .media-embed .setting .button-group {
2047 .media-embed-sidebar {
2058 /* Drag & drop on the editor upload */
2059 #wp-fullscreen-body .uploader-editor,
2060 .wp-editor-wrap .uploader-editor {
2061 background: rgba( 150, 150, 150, 0.9 );
2067 z-index: 99998; /* under the toolbar */
2072 #wp-fullscreen-body .uploader-editor {
2073 background: rgba( 0, 86, 132, 0.9 );
2075 z-index: 100050; /* above the editor toolbar */
2078 .wp-editor-wrap.wp-fullscreen-wrap .uploader-editor {
2082 #wp-fullscreen-body .uploader-editor-content,
2083 .wp-editor-wrap .uploader-editor-content {
2084 border: 1px dashed #fff;
2092 #wp-fullscreen-body .uploader-editor .uploader-editor-title,
2093 .wp-editor-wrap .uploader-editor .uploader-editor-title {
2098 -webkit-transform: translateY( -50% );
2099 -ms-transform: translateY(-50%);
2100 transform: translateY( -50% );
2110 .wp-editor-wrap .uploader-editor.droppable {
2111 background: rgba( 0, 86, 132, 0.9 );
2114 #wp-fullscreen-body .uploader-editor .uploader-editor-title,
2115 .wp-editor-wrap .uploader-editor.droppable .uploader-editor-title {
2122 .ie7 .media-frame .attachments-browser {
2126 .ie7 .media-frame .embed-url input {
2135 .ie7 .attachment-display-settings {
2139 .ie7 .attachment-preview,
2140 .ie7 .attachment-preview .thumbnail {
2145 .ie7 .media-frame .attachment .describe {
2149 .ie7 .media-sidebar .setting select {
2153 .ie7 .media-sidebar .setting input[type="text"],
2154 .ie7 .media-sidebar .setting input[type="password"],
2155 .ie7 .media-sidebar .setting input[type="email"],
2156 .ie7 .media-sidebar .setting input[type="number"],
2157 .ie7 .media-sidebar .setting input[type="search"],
2158 .ie7 .media-sidebar .setting input[type="tel"],
2159 .ie7 .media-sidebar .setting input[type="url"],
2160 .ie7 .media-sidebar .setting textarea {
2164 .ie7 .media-sidebar .setting .link-to-custom {
2173 .rtl .media-frame .search,
2174 .rtl .media-frame input[type="text"],
2175 .rtl .media-frame input[type="password"],
2176 .rtl .media-frame input[type="number"],
2177 .rtl .media-frame input[type="search"],
2178 .rtl .media-frame input[type="email"],
2179 .rtl .media-frame input[type="url"],
2180 .rtl .media-frame input[type="tel"],
2181 .rtl .media-frame textarea,
2182 .rtl .media-frame select {
2183 font-family: Tahoma, sans-serif;
2186 :lang(he-il) .rtl .media-modal,
2187 :lang(he-il) .rtl .media-frame,
2188 :lang(he-il) .rtl .media-frame .search,
2189 :lang(he-il) .rtl .media-frame input[type="text"],
2190 :lang(he-il) .rtl .media-frame input[type="password"],
2191 :lang(he-il) .rtl .media-frame input[type="number"],
2192 :lang(he-il) .rtl .media-frame input[type="search"],
2193 :lang(he-il) .rtl .media-frame input[type="email"],
2194 :lang(he-il) .rtl .media-frame input[type="url"],
2195 :lang(he-il) .rtl .media-frame textarea,
2196 :lang(he-il) .rtl .media-frame select {
2197 font-family: Arial, sans-serif;
2203 @media only screen and (max-width: 900px) {
2205 /* Drop-down menu */
2206 .media-frame:not(.hide-menu) .media-frame-title,
2207 .media-frame:not(.hide-menu) .media-frame-router,
2208 .media-frame:not(.hide-menu) .media-frame-content,
2209 .media-frame:not(.hide-menu) .media-frame-toolbar {
2213 .media-frame:not(.hide-menu) .media-frame-menu {
2218 .media-frame:not(.hide-menu) .media-menu {
2228 border: 1px solid #ccc;
2231 .media-frame:not(.hide-menu) .media-menu.visible {
2235 .media-frame:not(.hide-menu) .media-menu > a {
2240 .media-frame:not(.hide-menu) .media-menu > a.active {
2244 .media-frame:not(.hide-menu) .media-menu .separator {
2248 .media-frame:not(.hide-menu) .media-frame-title {
2253 .media-frame:not(.hide-menu) .media-frame-title .dashicons {
2254 display: inline-block;
2258 .media-frame:not(.hide-menu) .media-frame-title h1 {
2264 /* End drop-down menu */
2270 .attachments-browser .attachments,
2271 .attachments-browser .uploader-inline,
2272 .attachments-browser .media-toolbar {
2276 .media-sidebar .setting,
2277 .attachment-details .setting {
2281 .media-sidebar .setting input,
2282 .media-sidebar .setting textarea,
2283 .media-sidebar .setting span,
2284 .attachment-details .setting input,
2285 .attachment-details .setting textarea,
2286 .attachment-details .setting span,
2287 .compat-item label span {
2291 .media-sidebar .setting span,
2292 .attachment-details .setting span,
2293 .compat-item label span {
2294 text-align: inherit;
2300 .media-sidebar .setting .value,
2301 .attachment-details .setting .value {
2306 .media-sidebar .setting input[type="text"],
2307 .media-sidebar .setting input[type="password"],
2308 .media-sidebar .setting input[type="email"],
2309 .media-sidebar .setting input[type="number"],
2310 .media-sidebar .setting input[type="search"],
2311 .media-sidebar .setting input[type="tel"],
2312 .media-sidebar .setting input[type="url"],
2313 .media-sidebar .setting textarea,
2314 .media-sidebar .setting select,
2315 .attachment-details .setting input[type="text"],
2316 .attachment-details .setting input[type="password"],
2317 .attachment-details .setting input[type="email"],
2318 .attachment-details .setting input[type="number"],
2319 .attachment-details .setting input[type="search"],
2320 .attachment-details .setting input[type="tel"],
2321 .attachment-details .setting input[type="url"],
2322 .attachment-details .setting textarea,
2323 .attachment-details .setting select {
2330 .media-sidebar .setting select.columns,
2331 .attachment-details .setting select.columns {
2336 .media-frame textarea,
2337 .media-frame .search {
2341 .image-details .column-image {
2346 .image-details .column-settings {
2350 .image-details .media-modal {
2355 .image-details .embed-media-settings .setting {
2359 .image-details .embed-media-settings .setting span {
2366 .image-details .embed-media-settings .setting input.link-to-custom,
2367 .image-details .embed-media-settings .setting input[type="text"],
2368 .image-details .embed-media-settings .setting textarea {
2373 .image-details .embed-media-settings .custom-size {
2377 .collection-settings .setting input[type="checkbox"] {
2385 .media-selection:after {
2389 .media-selection .attachments {
2393 .media-modal .attachments-browser .media-toolbar .search {
2399 .media-modal .attachments-browser .media-toolbar .attachment-filters {
2403 .media-modal .attachments-browser .media-toolbar .spinner {
2407 /* Text inputs need to be 16px, or they force zooming on iOS */
2408 .media-frame input[type="text"],
2409 .media-frame input[type="password"],
2410 .media-frame input[type="number"],
2411 .media-frame input[type="search"],
2412 .media-frame input[type="email"],
2413 .media-frame input[type="url"],
2414 .media-frame textarea,
2415 .media-frame select {
2420 /* Responsive on portrait and landscape */
2421 @media only screen and (max-width: 640px), screen and (max-height: 400px) {
2422 /* Full-bleed modal */
2424 .image-details .media-modal {
2432 .media-modal-backdrop {
2440 -webkit-box-sizing: border-box;
2441 -moz-box-sizing: border-box;
2442 box-sizing: border-box;
2446 .media-sidebar.visible {
2450 .attachments-browser .attachments,
2451 .attachments-browser .uploader-inline,
2452 .attachments-browser .media-toolbar {
2456 .image-details .media-frame-title {
2462 .image-details .column-image,
2463 .image-details .column-settings {
2469 .image-details .column-settings {
2473 /* Media tabs on the top */
2474 .media-frame-content .media-toolbar .instructions {
2479 /* Landscape specific header override */
2480 @media screen and (max-height: 400px) {
2485 .media-frame-router {
2489 .media-frame-content {
2493 .attachments-browser .attachments {
2497 /* Prevent unnecessary scrolling on title input */
2498 .embed-link-settings {
2503 @media only screen and (max-width: 480px) {
2504 .media-modal-close {
2509 .media-modal .media-frame-title {
2513 .media-modal .media-frame-title h1,
2514 .media-frame:not(.hide-menu) .media-frame-title h1 {
2519 .media-frame:not(.hide-menu) .media-frame-title .dashicons {
2523 .media-frame-router,
2524 .media-frame:not(.hide-menu) .media-menu {
2528 .media-frame-content {
2532 .media-frame.hide-router .media-frame-content {
2541 (-webkit-min-device-pixel-ratio: 1.25),
2542 (min-resolution: 120dpi) {
2545 background-image: url(../images/uploader-icons-2x.png);
2546 -webkit-background-size: 134px 15px;
2547 background-size: 134px 15px;
2550 .media-frame .spinner {
2551 background-image: url(../images/spinner-2x.gif);
2555 .media-frame-content[data-columns="1"] .attachment {
2559 .media-frame-content[data-columns="2"] .attachment {
2563 .media-frame-content[data-columns="3"] .attachment {
2567 .media-frame-content[data-columns="4"] .attachment {
2571 .media-frame-content[data-columns="5"] .attachment {
2575 .media-frame-content[data-columns="6"] .attachment {
2579 .media-frame-content[data-columns="7"] .attachment {
2583 .media-frame-content[data-columns="8"] .attachment {
2587 .media-frame-content[data-columns="9"] .attachment {
2591 .media-frame-content[data-columns="10"] .attachment {
2595 .media-frame-content[data-columns="11"] .attachment {
2599 .media-frame-content[data-columns="12"] .attachment {