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
parent
ffe40885a1
commit
226dc75154
@ -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 {
|
||||
|
||||
@ -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];
|
||||
|
||||
@ -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() {
|
||||
|
||||
@ -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') ) {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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">×</span>
|
||||
<label><span class="screen-reader-text"><?php _e( 'scale height' ); ?></span>
|
||||
<span class="imgedit-separator" aria-hidden="true">×</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">×</span>
|
||||
<label><span class="screen-reader-text"><?php _e( 'selection height' ); ?></span>
|
||||
<span class="imgedit-separator" aria-hidden="true">×</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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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
Loading…
Reference in New Issue
Block a user