--- a/wp/wp-includes/css/media-views-rtl.css Tue Oct 22 16:11:46 2019 +0200
+++ b/wp/wp-includes/css/media-views-rtl.css Tue Dec 15 13:49:49 2020 +0100
@@ -1,3 +1,4 @@
+/*! This file is auto-generated */
/**
* Base Styles
*/
@@ -18,20 +19,20 @@
-webkit-overflow-scrolling: touch;
}
-.media-modal legend,
+.media-modal legend {
+ padding: 0;
+ font-size: 13px;
+}
+
.media-modal label {
font-size: 13px;
}
-.media-frame input,
-.media-frame textarea {
- padding: 6px 8px;
-}
-
-.media-frame select,
-.wp-admin .media-frame select {
- line-height: 28px;
- margin-top: 3px;
+.media-modal .legend-inline {
+ position: absolute;
+ transform: translate(100%, 50%);
+ margin-right: -1%;
+ line-height: 1.2;
}
.media-frame a {
@@ -41,7 +42,7 @@
.media-frame a:hover,
.media-frame a:active {
- color: #00a0d2;
+ color: #006799;
}
.media-frame a:focus {
@@ -66,19 +67,64 @@
color: #fff;
}
+.media-frame input,
+.media-frame textarea {
+ padding: 6px 8px;
+}
+
+.media-frame select,
+.wp-admin .media-frame select {
+ min-height: 30px;
+ vertical-align: middle;
+}
+
.media-frame input[type="text"],
.media-frame input[type="password"],
+.media-frame input[type="color"],
+.media-frame input[type="date"],
+.media-frame input[type="datetime"],
+.media-frame input[type="datetime-local"],
+.media-frame input[type="email"],
+.media-frame input[type="month"],
.media-frame input[type="number"],
.media-frame input[type="search"],
-.media-frame input[type="email"],
+.media-frame input[type="tel"],
+.media-frame input[type="time"],
.media-frame input[type="url"],
+.media-frame input[type="week"],
.media-frame textarea,
.media-frame select {
+ box-shadow: 0 0 0 transparent;
+ border-radius: 4px;
+ border: 1px solid #7e8993;
+ background-color: #fff;
+ color: #32373c;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
- font-size: 12px;
- border-width: 1px;
- border-style: solid;
- border-color: #ddd;
+ font-size: 13px;
+}
+
+.media-frame input[type="text"],
+.media-frame input[type="password"],
+.media-frame input[type="date"],
+.media-frame input[type="datetime"],
+.media-frame input[type="datetime-local"],
+.media-frame input[type="email"],
+.media-frame input[type="month"],
+.media-frame input[type="number"],
+.media-frame input[type="search"],
+.media-frame input[type="tel"],
+.media-frame input[type="time"],
+.media-frame input[type="url"],
+.media-frame input[type="week"] {
+ padding: 0 8px;
+ /* inherits font size 13px */
+ line-height: 2.15384615; /* 28px */
+}
+
+/* Search field in the Media Library toolbar */
+.media-frame.mode-grid .wp-filter input[type="search"] {
+ font-size: 14px;
+ line-height: 2;
}
.media-frame input[type="text"]:focus,
@@ -89,12 +135,9 @@
.media-frame input[type="url"]:focus,
.media-frame textarea:focus,
.media-frame select:focus {
- border-color: #5b9dd9;
-}
-
-.media-frame select {
- height: 24px;
- padding: 2px;
+ border-color: #007cba;
+ box-shadow: 0 0 0 1px #007cba;
+ outline: 2px solid transparent;
}
.media-frame input:disabled,
@@ -121,7 +164,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;
}
@@ -189,16 +237,15 @@
.media-modal-close:hover,
.media-modal-close:active {
- color: #00a0d2;
+ color: #006799;
}
.media-modal-close:focus {
- color: #00a0d2;
+ color: #006799;
border-color: #5b9dd9;
box-shadow: 0 0 3px rgba(0, 115, 170, 0.8);
/* Only visible in Windows High Contrast mode */
outline: 2px solid transparent;
- outline-offset: -2px;
}
.media-modal-close span.media-modal-icon {
@@ -228,16 +275,12 @@
}
.media-modal-content .media-frame select.attachment-filters {
- margin-top: 11px;
+ margin-top: 32px;
margin-left: 2%;
width: 42%;
width: calc(48% - 12px);
}
-.media-modal-content .media-toolbar-primary .media-button {
- float: left;
-}
-
.media-modal-content .attachments-browser .search {
width: 100%;
}
@@ -265,21 +308,16 @@
.media-frame-toolbar .media-toolbar {
top: auto;
- bottom: -45px;
+ bottom: -47px;
height: auto;
overflow: visible;
border-top: 1px solid #ddd;
}
-@media screen and (max-width: 782px) {
- .media-frame-toolbar .media-toolbar {
- bottom: -48px;
- }
-}
-
.media-toolbar-primary {
float: left;
height: 100%;
+ position: relative;
}
.media-toolbar-secondary {
@@ -309,7 +347,7 @@
left: 0;
bottom: 0;
width: 267px;
- padding: 0 16px 24px;
+ padding: 0 16px;
z-index: 75;
background: #f3f3f3;
border-right: 1px solid #ddd;
@@ -317,29 +355,21 @@
-webkit-overflow-scrolling: touch;
}
+/*
+ * Implementation of bottom padding in overflow content differs across browsers.
+ * We need a different method. See https://github.com/w3c/csswg-drafts/issues/129
+ */
+.media-sidebar::after {
+ content: "";
+ display: flex;
+ clear: both;
+ height: 24px;
+}
+
.hide-toolbar .media-sidebar {
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 +385,27 @@
display: block;
float: right;
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 .link-to-custom,
-.attachment-details .setting .link-to-custom {
+.media-sidebar .setting.has-description,
+.attachment-details .setting.has-description {
+ margin-bottom: 5px;
+}
+
+.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-left: 4%;
font-size: 12px;
@@ -381,8 +417,11 @@
max-width: 80px;
}
-.media-sidebar .setting select,
-.attachment-details .setting select {
+.media-sidebar .setting .value {
+ text-align: right;
+}
+
+.media-sidebar .setting select {
max-width: 65%;
}
@@ -399,17 +438,46 @@
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: right;
min-height: 22px;
padding-top: 8px;
- line-height: 16px;
+ line-height: 1.33333333;
font-weight: 400;
color: #666;
}
+.media-sidebar .checkbox-label-inline {
+ font-size: 12px;
+}
+
+.media-sidebar .copy-to-clipboard-container,
+.attachment-details .copy-to-clipboard-container {
+ flex-wrap: wrap;
+ margin-top: 10px;
+ margin-right: calc( 35% - 1px );
+ padding-top: 10px;
+}
+
+/* Needs high specificity. */
+.attachment-details .attachment-info .copy-to-clipboard-container {
+ float: none;
+}
+
+.media-sidebar .copy-to-clipboard-container .success,
+.attachment-details .copy-to-clipboard-container .success {
+ padding: 0;
+ min-height: 0;
+ text-align: right;
+}
+
.compat-item label span {
text-align: left;
}
@@ -450,7 +518,7 @@
clear: both;
font-size: 12px;
font-style: normal;
- margin-bottom: 0.5em;
+ margin-bottom: 10px;
}
.media-sidebar .setting textarea,
@@ -460,11 +528,6 @@
resize: vertical;
}
-.media-sidebar select,
-.attachment-details select {
- margin-top: 3px;
-}
-
.compat-item {
float: right;
width: 100%;
@@ -550,23 +613,29 @@
user-select: none;
}
-.media-menu > a {
+.media-menu .media-menu-item {
display: block;
+ box-sizing: border-box;
+ width: 100%;
position: relative;
+ border: 0;
+ margin: 0;
padding: 8px 20px;
- margin: 0;
- line-height: 18px;
font-size: 14px;
+ line-height: 1.28571428;
+ background: transparent;
color: #0073aa;
+ text-align: right;
text-decoration: none;
-}
-
-.media-menu > a:hover {
+ cursor: pointer;
+}
+
+.media-menu .media-menu-item:hover {
+ background: rgba(0, 0, 0, 0.04);
+}
+
+.media-menu .media-menu-item:active {
color: #0073aa;
- background: rgba(0, 0, 0, 0.04);
-}
-
-.media-menu > a:active {
outline: none;
}
@@ -576,6 +645,15 @@
font-weight: 600;
}
+.media-menu .media-menu-item:focus {
+ box-shadow:
+ 0 0 0 1px #5b9dd9,
+ 0 0 2px 1px rgba(30, 140, 190, 0.8);
+ color: #124964;
+ /* Only visible in Windows High Contrast mode */
+ outline: 1px solid transparent;
+}
+
.media-menu .separator {
height: 0;
margin: 12px 20px;
@@ -591,42 +669,48 @@
padding: 0 6px;
margin: 0;
clear: both;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
-}
-
-.media-router a {
- transition: none;
-}
-
-.media-router > a {
+}
+
+.media-router .media-menu-item {
position: relative;
float: right;
- padding: 8px 10px 9px;
+ border: 0;
margin: 0;
+ padding: 8px 10px 9px;
height: 18px;
- line-height: 18px;
+ line-height: 1.28571428;
font-size: 14px;
text-decoration: none;
-}
-
-.media-router > a:last-child {
+ background: transparent;
+ cursor: pointer;
+ transition: none;
+}
+
+.media-router .media-menu-item:last-child {
border-left: 0;
}
-.media-router > a:active {
- outline: none;
+.media-router .media-menu-item:hover,
+.media-router .media-menu-item:active {
+ color: #0073aa;
}
.media-router .active,
.media-router .active:hover {
- color: #32373c;
+ color: #23282d;
+}
+
+.media-router .media-menu-item:focus {
+ box-shadow:
+ 0 0 0 1px #5b9dd9,
+ 0 0 2px 1px rgba(30, 140, 190, 0.8);
+ color: #124964;
+ /* Only visible in Windows High Contrast mode */
+ outline: 1px solid transparent;
}
.media-router .active,
-.media-router > a.active:last-child {
+.media-router .media-menu-item.active:last-child {
margin: -1px -1px 0;
background: #fff;
border: 1px solid #ddd;
@@ -694,8 +778,6 @@
position: absolute;
right: 200px;
left: 0;
- bottom: 0;
- height: 60px;
z-index: 100;
bottom: 60px;
height: auto;
@@ -717,25 +799,47 @@
}
.media-frame.hide-menu .media-frame-menu,
+.media-frame.hide-menu .media-frame-menu-heading,
.media-frame.hide-router .media-frame-router,
.media-frame.hide-toolbar .media-frame-toolbar {
display: none;
}
-.media-frame.hide-router .media-frame-title {
- border-bottom: 1px solid #ddd;
- box-shadow: 0 4px 4px -4px rgba(0, 0, 0, 0.1);
-}
-
-.media-frame-title .dashicons {
- display: none;
-}
-
.media-frame-title h1 {
padding: 0 16px;
font-size: 22px;
- line-height: 50px;
+ line-height: 2.27272727;
+ margin: 0;
+}
+
+.media-frame-menu-heading,
+.media-attachments-filter-heading {
+ position: absolute;
+ right: 20px;
+ top: 22px;
margin: 0;
+ font-size: 13px;
+ line-height: 1;
+ /* Above the media-frame-menu. */
+ z-index: 151;
+}
+
+.media-attachments-filter-heading {
+ top: 10px;
+ right: 16px;
+}
+
+.mode-grid .media-attachments-filter-heading {
+ top: 0;
+ right: -9999px;
+}
+
+.mode-grid .media-frame-actions-heading {
+ display: none;
+}
+
+.wp-core-ui .button.media-frame-menu-toggle {
+ display: none;
}
.media-frame-title .suggested-dimensions {
@@ -759,8 +863,7 @@
max-height: 100%;
}
-.media-frame-content .crop-content .upload-errors
-{
+.media-frame-content .crop-content .upload-errors {
position: absolute;
width: 300px;
top: 50%;
@@ -804,7 +907,7 @@
* Search
*/
.media-frame .search {
- margin-top: 11px;
+ margin: 32px 0 0;
padding: 4px;
font-size: 13px;
color: #444;
@@ -816,6 +919,14 @@
max-width: 100%;
}
+.media-frame .media-search-input-label {
+ position: absolute;
+ right: 0;
+ top: 10px;
+ margin: 0;
+ line-height: 1;
+}
+
/**
* Attachments
*/
@@ -940,11 +1051,6 @@
transform: translate( 50%, -70% );
}
-.ie8 .wp-core-ui .attachment img.icon {
- top: 20%;
- position: relative;
-}
-
.wp-core-ui .attachment .filename {
position: absolute;
right: 0;
@@ -1049,7 +1155,7 @@
display: block;
width: 100%;
margin: 0;
- padding: 8px;
+ padding: 0 8px;
font-size: 12px;
border-radius: 0;
}
@@ -1066,7 +1172,8 @@
.attachments-browser .media-toolbar {
left: 300px;
- height: 50px;
+ height: 72px;
+ background: #fff;
}
.attachments-browser.hide-sidebar .media-toolbar {
@@ -1077,7 +1184,7 @@
.attachments-browser .media-toolbar-primary > .media-button-group,
.attachments-browser .media-toolbar-secondary > .media-button,
.attachments-browser .media-toolbar-secondary > .media-button-group {
- margin: 11px 0;
+ margin: 10px 0;
}
.attachments-browser .attachments {
@@ -1087,7 +1194,7 @@
.attachments-browser .attachments,
.attachments-browser .uploader-inline {
position: absolute;
- top: 50px;
+ top: 72px;
right: 0;
left: 300px;
bottom: 0;
@@ -1103,6 +1210,15 @@
max-width: 33%;
}
+.mode-grid .attachments-browser .media-toolbar-primary {
+ display: flex;
+ align-items: center;
+}
+
+.mode-grid .attachments-browser .media-toolbar-mode-select .media-toolbar-primary {
+ display: none;
+}
+
.attachments-browser .media-toolbar-secondary {
max-width: 66%;
}
@@ -1145,10 +1261,9 @@
.attachments-browser .instructions {
display: inline-block;
margin-top: 16px;
- line-height: 18px;
+ line-height: 1.38461538;
font-size: 13px;
color: #666;
- margin-left: 0.5em;
}
.attachments-browser .no-media {
@@ -1201,7 +1316,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 +1403,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;
right: 0;
left: 0;
bottom: 0;
- background: rgba(0, 86, 132, 0.9);
- z-index: 250000;
+ text-align: center;
display: none;
- text-align: center;
- opacity: 0;
+}
+
+.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;
right: 10px;
@@ -1312,17 +1444,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%;
right: 0;
left: 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,10 +1510,9 @@
margin: 0 0 4em;
}
-.uploader-inline h3, /* Back-compat for pre-4.4 */
.uploader-inline h2 {
font-size: 20px;
- line-height: 28px;
+ line-height: 1.4;
font-weight: 400;
margin: 0;
}
@@ -1389,7 +1532,6 @@
}
.uploader-inline p {
- font-size: 12px;
margin: 0.5em 0;
}
@@ -1440,7 +1582,7 @@
display: block;
padding-top: 12px;
font-size: 14px;
- line-height: 20px;
+ line-height: 1.42857142;
font-weight: 600;
}
@@ -1448,7 +1590,7 @@
float: right;
padding: 1px 8px;
margin: 1px -8px 1px 8px;
- line-height: 16px;
+ line-height: 1.4;
border-left: 1px solid #ddd;
color: #0073aa;
text-decoration: none;
@@ -1456,7 +1598,7 @@
.media-selection .button-link:hover,
.media-selection .button-link:focus {
- color: #00a0d2;
+ color: #006799;
}
.media-selection .button-link:last-child {
@@ -1561,14 +1703,26 @@
vertical-align: middle;
}
+.media-frame.mode-grid .spinner {
+ margin: 0;
+ float: none;
+ vertical-align: middle;
+}
+
+.media-modal .media-toolbar .spinner {
+ float: none;
+ vertical-align: bottom;
+ margin: 0 5px 5px 0;
+}
+
+.media-frame .instructions + .spinner.is-active {
+ vertical-align: middle;
+}
+
.media-frame .spinner.is-active {
visibility: visible;
}
-.media-toolbar .spinner {
- margin-top: 14px;
-}
-
/**
* Attachment Details
*/
@@ -1580,15 +1734,15 @@
.attachment-details .settings-save-status {
float: left;
text-transform: none;
- z-index: 10;
+ font-weight: 400;
}
.attachment-details .settings-save-status .spinner {
+ float: none;
margin-right: 5px;
}
.attachment-details .settings-save-status .saved {
- float: left;
display: none;
}
@@ -1597,14 +1751,14 @@
}
.attachment-details.save-complete .settings-save-status .saved {
- display: block;
+ display: inline-block;
}
.attachment-info {
overflow: hidden;
min-height: 60px;
margin-bottom: 16px;
- line-height: 18px;
+ line-height: 1.5;
color: #666;
border-bottom: 1px solid #ddd;
padding-bottom: 11px;
@@ -1704,10 +1858,6 @@
overflow: hidden;
}
-.attachment-display-settings h4 {
- margin: 1.4em 0 0.4em;
-}
-
.collection-settings {
overflow: hidden;
}
@@ -1717,7 +1867,8 @@
margin-left: 8px;
}
-.collection-settings .setting span {
+.collection-settings .setting span, /* Back-compat for pre-5.3 */
+.collection-settings .setting .name {
min-width: inherit;
}
@@ -1729,7 +1880,7 @@
}
.media-modal .imgedit-wrap .imgedit-panel-content {
- padding: 16px;
+ padding: 16px 16px 0 16px;
position: absolute;
top: 0;
left: 282px;
@@ -1738,10 +1889,18 @@
overflow: auto;
}
+/*
+ * Implementation of bottom padding in overflow content differs across browsers.
+ * We need a different method. See https://github.com/w3c/csswg-drafts/issues/129
+ */
+.media-modal .imgedit-wrap .imgedit-submit {
+ margin-bottom: 16px;
+}
+
.media-modal .imgedit-wrap .imgedit-settings {
background: #f3f3f3;
border-right: 1px solid #ddd;
- padding: 20px 16px 16px;
+ padding: 20px 16px 0;
position: absolute;
top: 0;
left: 0;
@@ -1750,6 +1909,14 @@
overflow: auto;
}
+/*
+ * Implementation of bottom padding in overflow content differs across browsers.
+ * We need a different method. See https://github.com/w3c/csswg-drafts/issues/129
+ */
+.media-modal .imgedit-wrap .imgedit-save-target {
+ margin: 8px 0 24px;
+}
+
.media-modal .imgedit-group {
background: none;
border: none;
@@ -1772,7 +1939,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 +1949,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;
@@ -1834,12 +1999,12 @@
display: block;
}
-.media-modal .imgedit-wrap div.updated {
+.media-modal .imgedit-wrap div.updated, /* Back-compat for pre-5.5 */
+.media-modal .imgedit-wrap .notice {
margin: 0;
margin-bottom: 16px;
}
-
/**
* Embed from URL and Image Details
*/
@@ -1855,12 +2020,17 @@
.media-frame .embed-url input {
font-size: 18px;
- padding: 12px 14px;
+ line-height: 1.22222222; /* 22px */
+ padding: 12px 14px 12px 40px; /* 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,10 +2048,22 @@
right: 0;
left: 0;
bottom: 0;
- padding: 16px 16px 32px;
+ padding: 0 16px;
overflow: auto;
}
+/*
+ * Implementation of bottom padding in overflow content differs across browsers.
+ * We need a different method. See https://github.com/w3c/csswg-drafts/issues/129
+ */
+.embed-link-settings::after,
+.embed-media-settings::after {
+ content: "";
+ display: flex;
+ clear: both;
+ height: 24px;
+}
+
.media-embed .embed-link-settings {
/* avoid Firefox to give focus to the embed preview container parent */
overflow: visible;
@@ -1926,6 +2108,10 @@
padding: 0;
}
+.image-details .embed-media-settings::after {
+ content: none;
+}
+
.image-details .embed-media-settings,
.image-details .embed-media-settings div {
box-sizing: border-box;
@@ -1941,7 +2127,6 @@
right: 0;
}
-.image-details .column-settings h3, /* Back-compat for pre-4.4 */
.image-details .column-settings h2 {
margin: 20px;
padding-top: 20px;
@@ -1992,22 +2177,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: right;
}
-.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 +2196,8 @@
margin: 26px 6px 0 6px;
}
-.image-details .custom-size:after {
- content: "";
- display: table;
- clear: both;
+.image-details .custom-size .description {
+ margin-right: 0;
}
.media-embed .thumbnail {
@@ -2049,7 +2224,8 @@
overflow: hidden;
}
-.media-embed .setting {
+.media-embed .setting,
+.media-embed .setting-group {
width: 100%;
margin: 10px 0;
float: right;
@@ -2057,6 +2233,10 @@
clear: both;
}
+.media-embed .setting-group .setting:not(.checkbox-setting) {
+ margin: 0;
+}
+
.media-embed .setting.has-description {
margin-bottom: 5px;
}
@@ -2066,7 +2246,18 @@
font-style: normal;
}
-.image-details .embed-media-settings .setting {
+.media-embed .content-track + .description {
+ line-height: 1.4;
+ /* The !important needs to override a high specificity selector from wp-medialement.css */
+ max-width: none !important;
+}
+
+.media-embed .remove-track {
+ margin-bottom: 10px;
+}
+
+.image-details .embed-media-settings .setting,
+.image-details .embed-media-settings .setting-group {
float: none;
width: auto;
}
@@ -2080,11 +2271,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 +2287,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-right: 27%;
width: 70%;
@@ -2107,7 +2299,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 +2313,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: 24px;
+ 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: right;
width: 25%;
text-align: left;
@@ -2131,8 +2336,10 @@
line-height: 1.1;
}
-.media-embed .setting .button-group {
- margin: 2px 0;
+/* Buttons group in IE 11. */
+.media-frame .setting-group .button-group,
+.image-details .embed-media-settings .setting .button-group {
+ width: auto;
}
.media-embed-sidebar {
@@ -2146,99 +2353,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;
- right: 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;
- right: 10px;
- left: 10px;
- bottom: 10px;
-}
-
-.wp-editor-wrap .uploader-editor .uploader-editor-title {
- position: absolute;
- top: 50%;
- right: 0;
- left: 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: right;
-}
+ .media-frame .setting .button-group {
+ display: flex;
+ margin: 0 !important;
+ max-width: none !important;
+ }
/**
* Localization
@@ -2276,27 +2398,61 @@
* Responsive layout
*/
@media only screen and (max-width: 900px) {
+ .media-modal .media-frame-title {
+ height: 40px;
+ }
+
+ .media-modal .media-frame-title h1 {
+ line-height: 2.22222222;
+ font-size: 18px;
+ }
+
+ .media-modal-close {
+ width: 42px;
+ height: 42px;
+ }
/* Drop-down menu */
- .media-frame:not(.hide-menu) .media-frame-title,
+ .media-frame .media-frame-title {
+ position: static;
+ padding: 0 44px;
+ text-align: center;
+ }
+
.media-frame:not(.hide-menu) .media-frame-router,
.media-frame:not(.hide-menu) .media-frame-content,
.media-frame:not(.hide-menu) .media-frame-toolbar {
right: 0;
}
+ .media-frame:not(.hide-menu) .media-frame-router {
+ /* 40 title + (40 - 6) menu toggle button + 6 spacing */
+ top: 80px;
+ }
+
+ .media-frame:not(.hide-menu) .media-frame-content {
+ /* 80 + room for the tabs */
+ top: 114px;
+ }
+
+ .media-frame.hide-router .media-frame-content {
+ top: 80px;
+ }
+
.media-frame:not(.hide-menu) .media-frame-menu {
position: static;
width: 0;
}
.media-frame:not(.hide-menu) .media-menu {
+ display: none;
width: auto;
max-width: 80%;
overflow: auto;
z-index: 2000;
- top: 50px;
- right: -300px;
+ top: 75px;
+ right: 50%;
+ transform: translateX(50%);
left: auto;
bottom: auto;
padding: 5px 0;
@@ -2304,7 +2460,7 @@
}
.media-frame:not(.hide-menu) .media-menu.visible {
- right: 0;
+ display: block;
}
.media-frame:not(.hide-menu) .media-menu > a {
@@ -2312,29 +2468,50 @@
font-size: 16px;
}
- .media-frame:not(.hide-menu) .media-menu > a.active {
- display: none;
- }
-
.media-frame:not(.hide-menu) .media-menu .separator {
margin: 5px 10px;
}
- .media-frame:not(.hide-menu) .media-frame-title {
- right: 0;
- }
-
- .media-frame:not(.hide-menu) .media-frame-title .dashicons {
- display: inline-block;
- line-height: 50px;
+ /* Visually hide the menu heading keeping it available to assistive technologies. */
+ .media-frame-menu-heading {
+ clip: rect(1px, 1px, 1px, 1px);
+ -webkit-clip-path: inset(50%);
+ clip-path: inset(50%);
+ height: 1px;
+ overflow: hidden;
+ padding: 0;
+ width: 1px;
+ word-wrap: normal !important;
}
- .media-frame:not(.hide-menu) .media-frame-title h1 {
- color: #0073aa;
- line-height: 3;
- font-size: 18px;
- float: right;
- cursor: pointer;
+ /* Reveal the menu toggle button. */
+ .wp-core-ui .media-frame:not(.hide-menu) .button.media-frame-menu-toggle {
+ display: inline-flex;
+ align-items: center;
+ position: absolute;
+ right: 50%;
+ transform: translateX(50%);
+ margin: -6px 0 0;
+ padding: 0 12px 0 2px;
+ font-size: 0.875rem;
+ font-weight: 600;
+ text-decoration: none;
+ background: transparent;
+ /* Only for IE11 to vertically align text within the inline-flex button */
+ height: 0.1%;
+ /* Modern browsers */
+ min-height: 40px;
+ }
+
+ .wp-core-ui .button.media-frame-menu-toggle:hover,
+ .wp-core-ui .button.media-frame-menu-toggle:active {
+ background: transparent;
+ transform: none;
+ }
+
+ .wp-core-ui .button.media-frame-menu-toggle:focus {
+ /* Only visible in Windows High Contrast mode */
+ outline: 1px solid transparent;
}
/* End drop-down menu */
@@ -2355,21 +2532,45 @@
.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;
+ }
+
+ /* Needs high specificity. */
+ .media-sidebar .setting .copy-to-clipboard-container,
+ .attachment-details .attachment-info .copy-to-clipboard-container {
+ margin-right: 0;
+ padding-top: 0;
+ }
+
+ .media-sidebar .setting .copy-attachment-url,
+ .attachment-details .attachment-info .copy-attachment-url {
+ margin: 0 1px;
}
.media-sidebar .setting .value,
@@ -2403,6 +2604,10 @@
height: auto;
}
+ .media-frame .media-toolbar input[type="search"] {
+ line-height: 2.25; /* 36px */
+ }
+
.media-sidebar .setting select.columns,
.attachment-details .setting select.columns {
width: auto;
@@ -2414,6 +2619,13 @@
padding: 3px 6px;
}
+ .wp-admin .media-frame select {
+ min-height: 40px;
+ font-size: 16px;
+ line-height: 1.625;
+ padding: 5px 8px 5px 24px;
+ }
+
.image-details .column-image {
width: 30%;
right: 70%;
@@ -2428,15 +2640,29 @@
left: 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: right;
width: 100%;
margin-bottom: 4px;
+ margin-right: 0;
+ }
+
+ .media-modal .legend-inline {
+ position: static;
+ transform: none;
+ margin-right: 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 +2686,7 @@
}
.collection-settings .setting input[type="checkbox"] {
+ float: none;
margin-top: 0;
}
@@ -2485,10 +2712,6 @@
height: auto;
}
- .media-modal .attachments-browser .media-toolbar .spinner {
- margin: 14px 2px 0;
- }
-
/* Text inputs need to be 16px, or they force zooming on iOS */
.media-frame input[type="text"],
.media-frame input[type="password"],
@@ -2500,6 +2723,39 @@
.media-frame select {
font-size: 16px;
}
+
+ .media-frame .media-toolbar input[type="search"] {
+ line-height: 2.3755; /* 38px */
+ }
+
+ .media-modal .media-toolbar .spinner {
+ margin-bottom: 10px;
+ }
+}
+
+@media screen and (max-width: 782px) {
+ .attachments-browser .media-toolbar {
+ height: 82px;
+ }
+
+ .attachments-browser .attachments,
+ .attachments-browser .uploader-inline {
+ top: 82px;
+ }
+
+ .media-frame-toolbar .media-toolbar {
+ bottom: -54px;
+ }
+
+ .mode-grid .attachments-browser .media-toolbar-primary {
+ display: block;
+ }
+
+ .media-sidebar .copy-to-clipboard-container .success,
+ .attachment-details .copy-to-clipboard-container .success {
+ font-size: 14px;
+ line-height: 2.71428571;
+ }
}
/* Responsive on portrait and landscape */
@@ -2559,31 +2815,6 @@
}
}
-/* Landscape specific header override */
-@media screen and (max-height: 400px) {
- .media-menu,
- .media-frame:not(.hide-menu) .media-menu {
- top: 44px;
- }
-
- .media-frame-router {
- top: 44px;
- }
-
- .media-frame-content {
- top: 78px;
- }
-
- .attachments-browser .attachments {
- top: 40px;
- }
-
- /* Prevent unnecessary scrolling on title input */
- .embed-link-settings {
- overflow: visible;
- }
-}
-
@media only screen and (min-width: 901px) and (max-height: 400px) {
.media-menu,
.media-frame:not(.hide-menu) .media-menu {
@@ -2593,41 +2824,9 @@
}
@media only screen and (max-width: 480px) {
- .media-modal-close {
- top: -5px;
- }
-
- .media-modal .media-frame-title {
- height: 40px;
- }
-
.wp-core-ui.wp-customizer .media-button {
margin-top: 13px;
}
-
- .media-modal .media-frame-title h1,
- .media-frame:not(.hide-menu) .media-frame-title h1 {
- font-size: 18px;
- line-height: 40px;
- }
-
- .media-frame:not(.hide-menu) .media-frame-title .dashicons {
- line-height: 40px;
- }
-
- .media-frame-router,
- .media-frame:not(.hide-menu) .media-menu {
- top: 40px;
- padding-top: 0;
- }
-
- .media-frame-content {
- top: 74px;
- }
-
- .media-frame.hide-router .media-frame-content {
- top: 40px;
- }
}
/**