Accessibility: Improve accessibility of all the media views form controls.

- changes the media views form controls to have explicitly associated labels with for/id attributes
- adds a few missing labels / aria-labels
- improves a few existing labels / aria-labels
- improves semantics in a few places, by adding visually hidden headings, fieldset + legend elements, aria-describedby attributes
- improves the image custom size input fields and their labelling
- adds `role="status"` to the "saved" indicator so that status messages are announced to assistive technologies
- swaps the columns source order in the image details template, to make visual and DOM order match
- swaps the "Replace" and "Back" buttons source order in the Replace Image view, to make visual and DOM order match
- gallery settings: move checkbox label to the right: checkboxes are supposed to have labels on the right
- merge similar strings, unified to "Drop files to upload" (removed "Drop files here", and "Drop files anywhere to upload")
- makes the "upload-ui" consistent across the media views
- hides the IE 11 "X" `::-ms-clear` button in the Insert from URL field, as it conflicts with the uploading spinner
- adds comments to all the media templates to clarify their usage
- slightly increases vertical spacing between form fields in the media sidebar
- removes some CSS selectors introduced as backwards compatibility for WordPress pre-4.4
- removes some CSS still targeting Internet Explorer 7 and 8

Fixes #47141.
Fixes #47122.


git-svn-id: https://develop.svn.wordpress.org/trunk@45499 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrea Fercia 2019-06-07 20:43:26 +00:00
parent ffe40885a1
commit 226dc75154
10 changed files with 644 additions and 617 deletions

View File

@ -67,9 +67,9 @@
overflow: visible;
}
.media-embed-details .embed-media-settings .setting span {
max-width: 400px;
width: auto;
.media-embed-details .embed-media-settings .setting span:not(.button-group) {
max-width: 400px; /* Back-compat for pre-5.3 */
width: auto; /* Back-compat for pre-5.3 */
}
.media-embed-details .embed-media-settings .checkbox-setting span {
@ -94,7 +94,7 @@
}
.media-embed-details .setting .remove-setting {
padding: 0;
padding: 5px 0;
}
.media-embed-details .setting a:hover {

View File

@ -1,5 +1,6 @@
var View = wp.media.View,
$ = jQuery,
l10n = wp.media.view.l10n,
EmbedUrl;
/**
@ -13,17 +14,17 @@ var View = wp.media.View,
* @augments Backbone.View
*/
EmbedUrl = View.extend(/** @lends wp.media.view.EmbedUrl.prototype */{
tagName: 'label',
tagName: 'span',
className: 'embed-url',
events: {
'input': 'url',
'keyup': 'url',
'change': 'url'
'input': 'url'
},
initialize: function() {
this.$input = $('<input id="embed-url-field" type="url" />').val( this.model.get('url') );
this.$input = $( '<input id="embed-url-field" type="url" />' )
.attr( 'aria-label', l10n.insertFromUrlTitle )
.val( this.model.get('url') );
this.input = this.$input[0];
this.spinner = $('<span class="spinner" />')[0];

View File

@ -134,7 +134,7 @@ ImageDetails = Select.extend(/** @lends wp.media.view.MediaFrame.ImageDetails.pr
items: {
back: {
text: l10n.back,
priority: 20,
priority: 80,
click: function() {
if ( previous ) {
frame.setState( previous );
@ -147,7 +147,7 @@ ImageDetails = Select.extend(/** @lends wp.media.view.MediaFrame.ImageDetails.pr
replace: {
style: 'primary',
text: l10n.replace,
priority: 80,
priority: 20,
requires: { selection: true },
click: function() {

View File

@ -66,7 +66,7 @@ AttachmentDisplay = Settings.extend(/** @lends wp.media.view.Settings.Attachment
attachment = this.options.attachment;
if ( 'none' === linkTo || 'embed' === linkTo || ( ! attachment && 'custom' !== linkTo ) ) {
$input.addClass( 'hidden' );
$input.closest( '.setting' ).addClass( 'hidden' );
return;
}
@ -82,7 +82,7 @@ AttachmentDisplay = Settings.extend(/** @lends wp.media.view.Settings.Attachment
$input.prop( 'readonly', 'custom' !== linkTo );
}
$input.removeClass( 'hidden' );
$input.closest( '.setting' ).removeClass( 'hidden' );
// If the input is visible, focus and select its contents.
if ( ! wp.media.isTouchDevice && $input.is(':visible') ) {

View File

@ -374,12 +374,11 @@
}
.drag-drop .drag-drop-inside {
margin: 70px auto 0;
margin: 60px auto 0;
width: 250px;
}
.drag-drop-inside p {
color: #a0a5aa;
font-size: 14px;
margin: 5px 0;
display: none;
@ -480,7 +479,6 @@ border color while dragging a file over the uploader drop area */
color: #c00;
}
.upload-php .mode-grid .media-sidebar .media-uploader-status.errors h3, /* Back-compat for pre-4.4 */
.upload-php .mode-grid .media-sidebar .media-uploader-status.errors h2 {
display: none;
}
@ -1031,7 +1029,6 @@ border color while dragging a file over the uploader drop area */
display: block;
}
#poststuff .imgedit-group-top h3, /* Back-compat for pre-4.4 */
#poststuff .imgedit-group-top h2 {
display: inline-block;
margin: 0;
@ -1109,6 +1106,10 @@ span.imgedit-scale-warn {
margin: 8px 0;
}
.imgedit-save-target legend {
font-weight: 600;
}
.imgedit-group {
margin-bottom: 8px;
padding: 10px;
@ -1126,7 +1127,6 @@ span.imgedit-scale-warn {
display: inline-block;
width: 7px;
text-align: center;
vertical-align: middle;
font-size: 13px;
color: #444;
}
@ -1190,10 +1190,6 @@ audio, video {
font-size: 16px;
padding: 6px 10px;
}
.imgedit-applyto .imgedit-label {
vertical-align: middle;
}
}
/**
@ -1232,10 +1228,6 @@ audio, video {
height: 40px;
}
.upload-php .media-modal-close .media-modal-icon {
margin: 9px 10px;
}
.edit-attachment-frame .edit-media-header .right:before,
.edit-attachment-frame .edit-media-header .left:before {
line-height: 40px !important;

View File

@ -64,16 +64,14 @@ function wp_image_editor( $post_id, $msg = false ) {
<fieldset class="imgedit-scale">
<legend><?php _e( 'New dimensions:' ); ?></legend>
<div class="nowrap">
<label><span class="screen-reader-text"><?php _e( 'scale width' ); ?></span>
<label for="imgedit-scale-width-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'scale width' ); ?></label>
<input type="text" id="imgedit-scale-width-<?php echo $post_id; ?>" onkeyup="imageEdit.scaleChanged(<?php echo $post_id; ?>, 1, this)" onblur="imageEdit.scaleChanged(<?php echo $post_id; ?>, 1, this)" value="<?php echo isset( $meta['width'] ) ? $meta['width'] : 0; ?>" />
</label>
<span class="imgedit-separator">&times;</span>
<label><span class="screen-reader-text"><?php _e( 'scale height' ); ?></span>
<span class="imgedit-separator" aria-hidden="true">&times;</span>
<label for="imgedit-scale-height-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'scale height' ); ?></label>
<input type="text" id="imgedit-scale-height-<?php echo $post_id; ?>" onkeyup="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0, this)" onblur="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0, this)" value="<?php echo isset( $meta['height'] ) ? $meta['height'] : 0; ?>" />
</label>
<span class="imgedit-scale-warn" id="imgedit-scale-warn-<?php echo $post_id; ?>">!</span>
<input id="imgedit-scale-button" type="button" onclick="imageEdit.action(<?php echo "$post_id, '$nonce'"; ?>, 'scale')" class="button button-primary" value="<?php esc_attr_e( 'Scale' ); ?>" />
</div>
</div>
</fieldset>
</div>
@ -124,26 +122,22 @@ function wp_image_editor( $post_id, $msg = false ) {
<fieldset class="imgedit-crop-ratio">
<legend><?php _e( 'Aspect ratio:' ); ?></legend>
<div class="nowrap">
<label><span class="screen-reader-text"><?php _e( 'crop ratio width' ); ?></span>
<label for="imgedit-crop-width-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'crop ratio width' ); ?></label>
<input type="text" id="imgedit-crop-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 0, this)" onblur="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 0, this)" />
</label>
<span class="imgedit-separator">:</span>
<label><span class="screen-reader-text"><?php _e( 'crop ratio height' ); ?></span>
<span class="imgedit-separator" aria-hidden="true">:</span>
<label for="imgedit-crop-height-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'crop ratio height' ); ?></label>
<input type="text" id="imgedit-crop-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 1, this)" onblur="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 1, this)" />
</label>
</div>
</fieldset>
<fieldset id="imgedit-crop-sel-<?php echo $post_id; ?>" class="imgedit-crop-sel">
<legend><?php _e( 'Selection:' ); ?></legend>
<div class="nowrap">
<label><span class="screen-reader-text"><?php _e( 'selection width' ); ?></span>
<label for="imgedit-sel-width-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'selection width' ); ?></label>
<input type="text" id="imgedit-sel-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" onblur="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" />
</label>
<span class="imgedit-separator">&times;</span>
<label><span class="screen-reader-text"><?php _e( 'selection height' ); ?></span>
<span class="imgedit-separator" aria-hidden="true">&times;</span>
<label for="imgedit-sel-height-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'selection height' ); ?></label>
<input type="text" id="imgedit-sel-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" onblur="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" />
</label>
</div>
</fieldset>
@ -168,19 +162,22 @@ function wp_image_editor( $post_id, $msg = false ) {
<div id="imgedit-save-target-<?php echo $post_id; ?>" class="imgedit-save-target">
<fieldset>
<legend><strong><?php _e( 'Apply changes to:' ); ?></strong></legend>
<legend><?php _e( 'Apply changes to:' ); ?></legend>
<label class="imgedit-label">
<input type="radio" name="imgedit-target-<?php echo $post_id; ?>" value="all" checked="checked" />
<?php _e( 'All image sizes' ); ?></label>
<span class="imgedit-label">
<input type="radio" id="imgedit-target-all" name="imgedit-target-<?php echo $post_id; ?>" value="all" checked="checked" />
<label for="imgedit-target-all"><?php _e( 'All image sizes' ); ?></label>
</span>
<label class="imgedit-label">
<input type="radio" name="imgedit-target-<?php echo $post_id; ?>" value="thumbnail" />
<?php _e( 'Thumbnail' ); ?></label>
<span class="imgedit-label">
<input type="radio" id="imgedit-target-thumbnail" name="imgedit-target-<?php echo $post_id; ?>" value="thumbnail" />
<label for="imgedit-target-thumbnail"><?php _e( 'Thumbnail' ); ?></label>
</span>
<label class="imgedit-label">
<input type="radio" name="imgedit-target-<?php echo $post_id; ?>" value="nothumb" />
<?php _e( 'All sizes except thumbnail' ); ?></label>
<span class="imgedit-label">
<input type="radio" id="imgedit-target-nothumb" name="imgedit-target-<?php echo $post_id; ?>" value="nothumb" />
<label for="imgedit-target-nothumb"><?php _e( 'All sizes except thumbnail' ); ?></label>
</span>
</fieldset>
</div>
</div>

View File

@ -2072,7 +2072,7 @@ wpUploaderInit = <?php echo wp_json_encode( $plupload_init ); ?>;
?>
<div id="drag-drop-area">
<div class="drag-drop-inside">
<p class="drag-drop-info"><?php _e( 'Drop files here' ); ?></p>
<p class="drag-drop-info"><?php _e( 'Drop files to upload' ); ?></p>
<p><?php _ex( 'or', 'Uploader: Drop files here - or - Select Files' ); ?></p>
<p class="drag-drop-buttons"><input id="plupload-browse-button" type="button" value="<?php esc_attr_e( 'Select Files' ); ?>" class="button" /></p>
</div>

View File

@ -309,7 +309,6 @@ TABLE OF CONTENTS:
display: inline-block;
border-radius: 0;
margin-right: -1px;
z-index: 10;
}
.wp-core-ui .button-group > .button-primary {

View File

@ -18,11 +18,22 @@
-webkit-overflow-scrolling: touch;
}
.media-modal legend,
.media-modal legend {
padding: 0;
font-size: 13px;
}
.media-modal label {
font-size: 13px;
}
.media-modal .legend-inline {
position: absolute;
transform: translate(-100%, 50%);
margin-left: -1%;
line-height: 1.2;
}
.media-frame input,
.media-frame textarea {
padding: 6px 8px;
@ -30,8 +41,10 @@
.media-frame select,
.wp-admin .media-frame select {
padding: 2px;
line-height: 2;
margin-top: 3px;
height: 28px;
vertical-align: middle;
}
.media-frame a {
@ -92,11 +105,6 @@
border-color: #5b9dd9;
}
.media-frame select {
height: 24px;
padding: 2px;
}
.media-frame input:disabled,
.media-frame textarea:disabled,
.media-frame input[readonly],
@ -121,7 +129,12 @@
color: #72777c;
}
.media-frame .hidden {
/*
* In some cases there's the need of higher specificity,
* for example higher than `.media-embed .setting`.
*/
.media-frame .hidden,
.media-frame .setting.hidden {
display: none;
}
@ -234,10 +247,6 @@
width: calc(48% - 12px);
}
.media-modal-content .media-toolbar-primary .media-button {
float: right;
}
.media-modal-content .attachments-browser .search {
width: 100%;
}
@ -321,25 +330,6 @@
bottom: 0;
}
.media-sidebar .sidebar-title {
font-size: 20px;
margin: 0;
padding: 12px 10px 10px;
line-height: 28px;
}
.media-sidebar .sidebar-content {
padding: 0 10px;
margin-bottom: 130px;
}
.media-sidebar .search {
display: block;
width: 100%;
}
.media-sidebar h3, /* Back-compat for pre-4.4 */
.image-details h3, /* Back-compat for pre-4.4 */
.media-sidebar h2,
.image-details h2 {
position: relative;
@ -355,21 +345,27 @@
display: block;
float: left;
width: 100%;
margin: 0 0 10px;
}
.media-sidebar .collection-settings .setting {
margin: 1px 0;
}
.media-sidebar .setting label,
.attachment-details .setting label {
display: block;
.media-sidebar .setting.has-description,
.attachment-details .setting.has-description {
margin-bottom: 5px;
}
.media-sidebar .setting .link-to-custom,
.attachment-details .setting .link-to-custom {
.media-sidebar .setting .link-to-custom {
margin: 3px 2px 0;
}
.media-sidebar .setting span,
.attachment-details .setting span {
.media-sidebar .setting span, /* Back-compat for pre-5.3 */
.attachment-details .setting span, /* Back-compat for pre-5.3 */
.media-sidebar .setting .name,
.media-sidebar .setting .value,
.attachment-details .setting .name {
min-width: 30%;
margin-right: 4%;
font-size: 12px;
@ -381,8 +377,11 @@
max-width: 80px;
}
.media-sidebar .setting select,
.attachment-details .setting select {
.media-sidebar .setting .value {
text-align: left;
}
.media-sidebar .setting select {
max-width: 65%;
}
@ -399,8 +398,13 @@
padding: 0;
}
.media-sidebar .setting span,
.attachment-details .setting span,
.media-sidebar .setting span, /* Back-compat for pre-5.3 */
.attachment-details .setting span, /* Back-compat for pre-5.3 */
.media-sidebar .setting .name,
.media-sidebar .setting .value,
.media-sidebar .checkbox-label-inline,
.attachment-details .setting .name,
.attachment-details .setting .value,
.compat-item label span {
float: left;
min-height: 22px;
@ -410,6 +414,10 @@
color: #666;
}
.media-sidebar .checkbox-label-inline {
font-size: 12px;
}
.compat-item label span {
text-align: right;
}
@ -450,7 +458,7 @@
clear: both;
font-size: 12px;
font-style: normal;
margin-bottom: 0.5em;
margin-bottom: 10px;
}
.media-sidebar .setting textarea,
@ -460,11 +468,6 @@
resize: vertical;
}
.media-sidebar select,
.attachment-details select {
margin-top: 3px;
}
.compat-item {
float: left;
width: 100%;
@ -759,8 +762,7 @@
max-height: 100%;
}
.media-frame-content .crop-content .upload-errors
{
.media-frame-content .crop-content .upload-errors {
position: absolute;
width: 300px;
top: 50%;
@ -940,11 +942,6 @@
transform: translate( -50%, -70% );
}
.ie8 .wp-core-ui .attachment img.icon {
top: 20%;
position: relative;
}
.wp-core-ui .attachment .filename {
position: absolute;
left: 0;
@ -1201,7 +1198,6 @@
max-width: 400px;
}
.uploader-inline .media-uploader-status h3, /* Back-compat for pre-4.4 */
.uploader-inline .media-uploader-status h2 {
display: none;
}
@ -1289,21 +1285,39 @@
word-wrap: break-word;
}
.uploader-window {
position: fixed;
/**
* Window and Editor uploaders used to display "drop zones"
*/
.uploader-window,
.wp-editor-wrap .uploader-editor {
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 86, 132, 0.9);
z-index: 250000;
display: none;
text-align: center;
opacity: 0;
display: none;
}
.uploader-window {
position: fixed;
z-index: 250000;
opacity: 0; /* Only the inline uploader is animated with JS, the editor one isn't */
transition: opacity 250ms;
}
.uploader-window-content {
.wp-editor-wrap .uploader-editor {
position: absolute;
z-index: 99998; /* under the toolbar */
background: rgba(150, 150, 150, 0.9);
}
.uploader-window,
.wp-editor-wrap .uploader-editor.droppable {
background: rgba(0, 86, 132, 0.9);
}
.uploader-window-content,
.wp-editor-wrap .uploader-editor-content {
position: absolute;
top: 10px;
left: 10px;
@ -1312,17 +1326,29 @@
border: 1px dashed #fff;
}
.uploader-window h3, /* Back-compat for pre-4.4 */
.uploader-window h1 {
margin: -0.5em 0 0;
/* uploader drop-zone title */
.uploader-window h1, /* Back-compat for pre-5.3 */
.uploader-window .uploader-editor-title,
.wp-editor-wrap .uploader-editor .uploader-editor-title {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY( -50% );
font-size: 40px;
transform: translateY(-50%);
font-size: 3em;
line-height: 1.3;
font-weight: 600;
color: #fff;
padding: 0;
margin: 0;
padding: 0 10px;
}
.wp-editor-wrap .uploader-editor .uploader-editor-title {
display: none;
}
.wp-editor-wrap .uploader-editor.droppable .uploader-editor-title {
display: block;
}
.uploader-window .media-progress-bar {
@ -1366,7 +1392,6 @@
margin: 0 0 4em;
}
.uploader-inline h3, /* Back-compat for pre-4.4 */
.uploader-inline h2 {
font-size: 20px;
line-height: 1.4;
@ -1389,7 +1414,6 @@
}
.uploader-inline p {
font-size: 12px;
margin: 0.5em 0;
}
@ -1580,15 +1604,15 @@
.attachment-details .settings-save-status {
float: right;
text-transform: none;
z-index: 10;
font-weight: 400;
}
.attachment-details .settings-save-status .spinner {
float: none;
margin-left: 5px;
}
.attachment-details .settings-save-status .saved {
float: right;
display: none;
}
@ -1597,7 +1621,7 @@
}
.attachment-details.save-complete .settings-save-status .saved {
display: block;
display: inline-block;
}
.attachment-info {
@ -1704,10 +1728,6 @@
overflow: hidden;
}
.attachment-display-settings h4 {
margin: 1.4em 0 0.4em;
}
.collection-settings {
overflow: hidden;
}
@ -1717,7 +1737,8 @@
margin-right: 8px;
}
.collection-settings .setting span {
.collection-settings .setting span, /* Back-compat for pre-5.3 */
.collection-settings .setting .name {
min-width: inherit;
}
@ -1772,7 +1793,6 @@
margin: 0;
}
.media-modal .imgedit-group-top h3, /* Back-compat for pre-4.4 */
.media-modal .imgedit-group-top h2,
.media-modal .imgedit-group-top h2 .button-link {
display: inline-block;
@ -1783,7 +1803,6 @@
margin-top: 3px;
}
.media-modal .imgedit-group-top h3 a, /* Back-compat for pre-4.4 */
.media-modal .imgedit-group-top h2 a,
.media-modal .imgedit-group-top h2 .button-link {
text-decoration: none;
@ -1839,7 +1858,6 @@
margin-bottom: 16px;
}
/**
* Embed from URL and Image Details
*/
@ -1855,12 +1873,16 @@
.media-frame .embed-url input {
font-size: 18px;
padding: 12px 14px;
padding: 12px 40px 12px 14px; /* right padding to leave room for the spinner */
width: 100%;
min-width: 200px;
box-shadow: inset 2px 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.media-frame .embed-url input::-ms-clear {
display: none; /* the "x" in IE 11 conflicts with the spinner */
}
.media-frame .embed-url .spinner {
position: absolute;
top: 32px;
@ -1878,7 +1900,7 @@
left: 0;
right: 0;
bottom: 0;
padding: 16px 16px 32px;
padding: 0 16px 32px;
overflow: auto;
}
@ -1941,7 +1963,6 @@
left: 0;
}
.image-details .column-settings h3, /* Back-compat for pre-4.4 */
.image-details .column-settings h2 {
margin: 20px;
padding-top: 20px;
@ -1992,22 +2013,14 @@
content: "\f142";
}
.image-details .embed-media-settings .size {
margin-bottom: 4px;
}
.image-details .custom-size span {
display: block;
}
.image-details .custom-size label {
.image-details .custom-size label, /* Back-compat for pre-5.3 */
.image-details .custom-size .custom-size-setting {
display: block;
float: left;
}
.image-details .custom-size span small {
color: #555d66; /* #f3f3f3 background */
font-size: inherit;
.image-details .custom-size .custom-size-setting label {
float: none;
}
.image-details .custom-size input {
@ -2019,10 +2032,8 @@
margin: 26px 6px 0 6px;
}
.image-details .custom-size:after {
content: "";
display: table;
clear: both;
.image-details .custom-size .description {
margin-left: 0;
}
.media-embed .thumbnail {
@ -2049,7 +2060,8 @@
overflow: hidden;
}
.media-embed .setting {
.media-embed .setting,
.media-embed .setting-group {
width: 100%;
margin: 10px 0;
float: left;
@ -2057,6 +2069,10 @@
clear: both;
}
.media-embed .setting-group .setting:not(.checkbox-setting) {
margin: 0;
}
.media-embed .setting.has-description {
margin-bottom: 5px;
}
@ -2066,7 +2082,8 @@
font-style: normal;
}
.image-details .embed-media-settings .setting {
.image-details .embed-media-settings .setting,
.image-details .embed-media-settings .setting-group {
float: none;
width: auto;
}
@ -2080,11 +2097,11 @@
}
.media-embed .setting input[type="text"],
.media-embed .setting textarea {
.media-embed .setting textarea,
.media-embed fieldset {
display: block;
width: 100%;
max-width: 400px;
margin: 1px 0;
}
.image-details .embed-media-settings .setting input[type="text"],
@ -2096,6 +2113,7 @@
.image-details .embed-media-settings .setting input.link-to-custom,
.image-details .embed-media-settings .link-target,
.image-details .embed-media-settings .custom-size,
.image-details .embed-media-settings .setting-group,
.image-details .description {
margin-left: 27%;
width: 70%;
@ -2107,7 +2125,13 @@
}
.image-details .embed-media-settings .link-target {
margin-top: 24px;
margin-top: 16px;
}
.image-details .checkbox-label,
.audio-details .checkbox-label,
.video-details .checkbox-label {
vertical-align: baseline;
}
.media-embed .setting input.hidden,
@ -2115,15 +2139,22 @@
display: none;
}
.media-embed .setting span {
display: block;
width: 200px;
.media-embed .setting span, /* Back-compat for pre-5.3 */
.media-embed .setting .name,
.media-embed .setting-group .name {
display: inline-block;
font-size: 13px;
line-height: 1.84615384;
color: #666;
}
.image-details .embed-media-settings .setting span {
.media-embed .setting span {
display: block; /* Back-compat for pre-5.3 */
width: 200px; /* Back-compat for pre-5.3 */
}
.image-details .embed-media-settings .setting span, /* Back-compat for pre-5.3 */
.image-details .embed-media-settings .setting .name {
float: left;
width: 25%;
text-align: right;
@ -2131,10 +2162,6 @@
line-height: 1.1;
}
.media-embed .setting .button-group {
margin: 2px 0;
}
.media-embed-sidebar {
position: absolute;
top: 0;
@ -2146,99 +2173,14 @@
margin-top: 10px;
}
/* Drag & drop on the editor upload */
.wp-editor-wrap .uploader-editor {
background: rgba(150, 150, 150, 0.9);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99998; /* under the toolbar */
display: none;
text-align: center;
}
.wp-editor-wrap .uploader-editor-content {
border: 1px dashed #fff;
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
.wp-editor-wrap .uploader-editor .uploader-editor-title {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY( -50% );
font-size: 3em;
line-height: 1.3;
font-weight: 600;
color: #fff;
padding: 0;
margin: 0;
display: none;
}
.wp-editor-wrap .uploader-editor.droppable {
background: rgba(0, 86, 132, 0.9);
}
.wp-editor-wrap .uploader-editor.droppable .uploader-editor-title {
display: block;
}
/**
* IE7 Fixes
* Button groups fix: can be removed together with the Back-compat for pre-5.3
*/
.ie7 .media-frame .attachments-browser {
position: static;
}
.ie7 .media-frame .embed-url input {
margin-top: 4px;
width: 90%;
}
.ie7 .compat-item {
width: 99%;
}
.ie7 .attachment-display-settings {
width: auto;
}
.ie7 .attachment-preview,
.ie7 .attachment-preview .thumbnail {
width: 120px;
height: 120px;
}
.ie7 .media-frame .attachment .describe {
width: 102px;
}
.ie7 .media-sidebar .setting select {
max-width: 55%;
}
.ie7 .media-sidebar .setting input[type="text"],
.ie7 .media-sidebar .setting input[type="password"],
.ie7 .media-sidebar .setting input[type="email"],
.ie7 .media-sidebar .setting input[type="number"],
.ie7 .media-sidebar .setting input[type="search"],
.ie7 .media-sidebar .setting input[type="tel"],
.ie7 .media-sidebar .setting input[type="url"],
.ie7 .media-sidebar .setting textarea {
width: 55%;
}
.ie7 .media-sidebar .setting .link-to-custom {
float: left;
}
.media-frame .setting .button-group {
display: flex;
margin: 0 !important;
max-width: none !important;
}
/**
* Localization
@ -2355,21 +2297,33 @@
.media-sidebar .setting input,
.media-sidebar .setting textarea,
.media-sidebar .setting span,
.media-sidebar .setting .name,
.attachment-details .setting input,
.attachment-details .setting textarea,
.attachment-details .setting span,
.attachment-details .setting .name,
.compat-item label span {
float: none;
display: inline-block;
}
.media-sidebar .setting span, /* Back-compat for pre-5.3 */
.attachment-details .setting span, /* Back-compat for pre-5.3 */
.media-sidebar .checkbox-label-inline {
float: none;
}
.media-sidebar .setting span,
.attachment-details .setting span,
.media-sidebar .setting .select-label-inline {
display: inline;
}
.media-sidebar .setting .name,
.media-sidebar .checkbox-label-inline,
.attachment-details .setting .name,
.compat-item label span {
text-align: inherit;
min-height: 16px;
margin: 0;
padding: 8px 2px 0;
padding: 8px 2px 2px;
}
.media-sidebar .setting .value,
@ -2428,15 +2382,29 @@
right: 30px;
}
.image-details .embed-media-settings .setting {
.image-details .embed-media-settings .setting,
.image-details .embed-media-settings .setting-group {
margin: 20px;
}
.image-details .embed-media-settings .setting span {
.image-details .embed-media-settings .setting span, /* Back-compat for pre-5.3 */
.image-details .embed-media-settings .setting .name {
float: none;
text-align: left;
width: 100%;
margin-bottom: 4px;
margin-left: 0;
}
.media-modal .legend-inline {
position: static;
transform: none;
margin-left: 0;
margin-bottom: 6px;
}
.image-details .embed-media-settings .setting-group .setting {
margin-bottom: 0;
}
.image-details .embed-media-settings .setting input.link-to-custom,
@ -2460,6 +2428,7 @@
}
.collection-settings .setting input[type="checkbox"] {
float: none;
margin-top: 0;
}

File diff suppressed because it is too large Load Diff