--- a/wp/wp-admin/css/media-rtl.css Thu Sep 29 08:06:27 2022 +0200
+++ b/wp/wp-admin/css/media-rtl.css Fri Sep 05 18:40:08 2025 +0200
@@ -113,14 +113,8 @@
margin-left: 10px;
}
-.media-item-wrapper {
- display: grid;
- grid-template-columns: 1fr 1fr;
-}
-
.media-item .attachment-tools {
display: flex;
- justify-content: flex-end;
align-items: center;
}
@@ -131,6 +125,7 @@
}
.media-item .edit-attachment.copy-to-clipboard-container {
+ display: flex;
margin-top: 0;
}
@@ -190,15 +185,10 @@
display: none;
}
-.media-item .original {
- position: relative;
- height: 34px;
-}
-
.media-item .progress {
- float: left;
+ display: inline-block;
height: 22px;
- margin: 7px 6px;
+ margin: 0 6px 7px;
width: 200px;
line-height: 2em;
padding: 0;
@@ -356,9 +346,7 @@
}
#find-posts-close:focus {
- box-shadow:
- 0 0 0 1px #4f94d4,
- 0 0 2px 1px rgba(79, 148, 212, 0.8);
+ box-shadow: 0 0 0 2px #2271b1;
/* Only visible in Windows High Contrast mode */
outline: 2px solid transparent;
outline-offset: -2px;
@@ -456,6 +444,10 @@
position: relative;
}
+.post-type-attachment .wp-filter select {
+ margin: 0 0 0 6px;
+}
+
/**
* Media Library grid view
*/
@@ -533,9 +525,7 @@
.media-frame.mode-grid .attachment:focus,
.media-frame.mode-grid .selected.attachment:focus,
.media-frame.mode-grid .attachment.details:focus {
- box-shadow:
- inset 0 0 2px 3px #f0f0f1,
- inset 0 0 0 7px #4f94d4;
+ box-shadow: inset 0 0 0 2px #2271b1;
/* Only visible in Windows High Contrast mode */
outline: 2px solid transparent;
outline-offset: -6px;
@@ -584,16 +574,10 @@
margin-top: 0;
}
-.media-search-input-label {
- margin: 0 0 0 .2em;
+.media-frame-content .media-search-input-label {
vertical-align: baseline;
}
-.media-frame.mode-grid .media-search-input-label {
- position: static;
- margin: 0 0 0 .5em;
-}
-
.attachments-browser .media-toolbar-secondary > .media-button {
margin-left: 10px;
}
@@ -782,8 +766,8 @@
.edit-attachment-frame input,
.edit-attachment-frame textarea {
- padding: 6px 8px;
- line-height: 1.14285714;
+ padding: 4px 8px;
+ line-height: 1.42857143;
}
.edit-attachment-frame .attachment-info {
@@ -839,7 +823,7 @@
}
.copy-to-clipboard-container .success {
- color: #008a20;
+ color: #007017;
margin-right: 8px;
}
@@ -850,6 +834,11 @@
margin-bottom: 5px;
}
+.wp_attachment_details #attachment_alt {
+ max-width: 500px;
+ height: 3.28571428em;
+}
+
.wp_attachment_details .attachment-alt-text-description {
margin-top: 5px;
}
@@ -873,16 +862,16 @@
padding-top: 10px;
}
-.imgedit-settings p,
-.imgedit-settings fieldset {
+.image-editor p,
+.image-editor fieldset {
margin: 8px 0;
}
-.imgedit-settings legend {
+.image-editor legend {
margin-bottom: 5px;
}
-.describe .imgedit-wrap .imgedit-settings {
+.describe .imgedit-wrap .image-editor {
padding: 0 5px;
}
@@ -894,19 +883,31 @@
height: auto;
}
-.wp_attachment_holder .imgedit-wrap .imgedit-panel-content {
- float: right;
- padding: 3px 0 0 16px;
- min-width: 400px;
- max-width: calc( 100% - 266px );
+.imgedit-panel-content {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 20px;
+ margin-bottom: 20px;
}
-.wp_attachment_holder .imgedit-wrap .imgedit-settings {
+.imgedit-settings {
+ max-width: 240px; /* Prevent reflow when help info is expanded. */
+}
+
+.imgedit-group-controls > * {
+ display: none;
+}
+
+.imgedit-panel-active .imgedit-group-controls > * {
+ display: block;
+}
+
+.wp_attachment_holder .imgedit-wrap .image-editor {
float: left;
width: 250px;
}
-.imgedit-settings input {
+.image-editor input {
margin-top: 0;
vertical-align: middle;
}
@@ -941,7 +942,7 @@
}
.media-disabled,
-.imgedit-settings .disabled {
+.image-editor .disabled {
/* WCAG 1.4.3 Text or images of text that are part of an inactive user
interface component ... have no contrast requirement. */
color: #a7aaad;
@@ -965,10 +966,6 @@
float: right;
}
-.imgedit-menu {
- margin: 0 0 12px;
-}
-
.imgedit-menu .note-no-rotate {
clear: both;
margin: 0;
@@ -981,10 +978,10 @@
min-height: 28px;
font-size: 13px;
line-height: 2;
- margin: 0 0 8px 8px;
padding: 0 10px;
}
+.imgedit-menu .button:after,
.imgedit-menu .button:before {
font: normal 16px/1 dashicons;
margin-left: 8px;
@@ -996,6 +993,16 @@
-moz-osx-font-smoothing: grayscale;
}
+.imgedit-menu .imgedit-rotate.button:after {
+ content: '\f140';
+ margin-right: 2px;
+ margin-left: 0;
+}
+
+.imgedit-menu .imgedit-rotate.button[aria-expanded="true"]:after {
+ content: '\f142';
+}
+
.imgedit-menu .button.disabled {
color: #a7aaad;
border-color: #dcdcde;
@@ -1010,22 +1017,14 @@
content: "\f165";
}
-.imgedit-rleft:before {
- content: "\f166";
+.imgedit-scale:before {
+ content: "\f211";
}
-.imgedit-rright:before {
+.imgedit-rotate:before {
content: "\f167";
}
-.imgedit-flipv:before {
- content: "\f168";
-}
-
-.imgedit-fliph:before {
- content: "\f169";
-}
-
.imgedit-undo:before {
content: "\f171";
}
@@ -1044,23 +1043,19 @@
background-size: 20px 20px;
}
+.imgedit-crop-wrap {
+ padding: 20px;
+ background-image: linear-gradient(-45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7), linear-gradient(-45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7);
+ background-position: 100% 0, 10px 10px;
+ background-size: 20px 20px;
+}
+
+
.imgedit-crop {
margin: 0 0 0 8px;
}
-.imgedit-rleft {
- margin: 0 3px;
-}
-
-.imgedit-rright {
- margin: 0 3px 0 8px;
-}
-
-.imgedit-flipv {
- margin: 0 3px;
-}
-
-.imgedit-fliph {
+.imgedit-rotate {
margin: 0 3px 0 8px;
}
@@ -1072,6 +1067,12 @@
margin: 0 3px 0 8px;
}
+.imgedit-thumbnail-preview-group {
+ display: flex;
+ flex-wrap: wrap;
+ column-gap: 10px;
+}
+
.imgedit-thumbnail-preview {
margin: 10px 0 0 8px;
}
@@ -1098,11 +1099,41 @@
padding: .5em 0 0;
}
+.imgedit-popup-menu,
.imgedit-help {
display: none;
padding-bottom: 8px;
}
+.imgedit-panel-tools > .imgedit-menu {
+ display: flex;
+ column-gap: 4px;
+ align-items: flex-start;
+ flex-wrap: wrap;
+}
+
+.imgedit-popup-menu {
+ width: calc( 100% - 20px );
+ position: absolute;
+ background: #fff;
+ padding: 10px;
+ box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
+}
+
+.image-editor .imgedit-menu .imgedit-popup-menu button {
+ display: block;
+ margin: 2px 0;
+ width: 100%;
+ white-space: break-spaces;
+ line-height: 1.5;
+ padding-top: 3px;
+ padding-bottom: 2px;
+}
+
+.imgedit-rotate-menu-container {
+ position: relative;
+}
+
.imgedit-help.imgedit-restore {
padding-bottom: 0;
}
@@ -1125,8 +1156,8 @@
.image-editor .imgedit-settings .imgedit-help-toggle:focus {
color: #2271b1;
- border-color: #4f94d4;
- box-shadow: 0 0 3px rgba(34, 113, 177, 0.8);
+ border-color: #2271b1;
+ box-shadow: 0 0 0 1px #2271b1;
/* Only visible in Windows High Contrast mode */
outline: 2px solid transparent;
}
@@ -1135,10 +1166,6 @@
padding: 0;
}
-.imgedit-submit {
- margin: 8px 0 0;
-}
-
.imgedit-submit-btn {
margin-right: 20px;
}
@@ -1150,8 +1177,11 @@
}
span.imgedit-scale-warn {
- color: #d63638;
- font-size: 20px;
+ display: flex;
+ align-items: center;
+ margin: 4px;
+ gap: 4px;
+ color: #b32d2e;
font-style: normal;
visibility: hidden;
vertical-align: middle;
@@ -1166,17 +1196,19 @@
}
.imgedit-group {
- margin-bottom: 8px;
- padding: 10px;
+ margin-bottom: 20px;
}
-.imgedit-settings .imgedit-original-dimensions {
+.image-editor .imgedit-original-dimensions {
display: inline-block;
}
-.imgedit-settings .imgedit-scale input[type="text"],
-.imgedit-settings .imgedit-crop-ratio input[type="text"],
-.imgedit-settings .imgedit-crop-sel input[type="text"] {
+.image-editor .imgedit-scale-controls input[type="text"],
+.image-editor .imgedit-crop-ratio input[type="text"],
+.image-editor .imgedit-crop-sel input[type="text"],
+.image-editor .imgedit-scale-controls input[type="number"],
+.image-editor .imgedit-crop-ratio input[type="number"],
+.image-editor .imgedit-crop-sel input[type="number"] {
width: 80px;
font-size: 14px;
padding: 0 8px;
@@ -1190,12 +1222,12 @@
color: #3c434a;
}
-.imgedit-settings .imgedit-scale-button-wrapper {
+.image-editor .imgedit-scale-button-wrapper {
margin-top: 0.3077em;
display: block;
}
-.imgedit-settings .imgedit-scale .button {
+.image-editor .imgedit-scale-controls .button {
margin-bottom: 0;
}
@@ -1224,7 +1256,6 @@
* HiDPI Displays
*/
@media print,
- (-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
.imgedit-wait:before {
background-image: url(../images/spinner-2x.gif);
@@ -1232,11 +1263,24 @@
}
@media screen and (max-width: 782px) {
+ .edit-attachment-frame input,
+ .edit-attachment-frame textarea {
+ line-height: 1.5;
+ }
+
.wp_attachment_details label[for="content"] {
font-size: 14px;
line-height: 1.5;
}
+ .wp_attachment_details textarea {
+ line-height: 1.5;
+ }
+
+ .wp_attachment_details #attachment_alt {
+ height: 3.375em;
+ }
+
.media-upload-form .media-item.error,
.media-upload-form .media-item .error {
font-size: 13px;
@@ -1251,15 +1295,15 @@
padding: 10px 12px 10px 0;
}
- .imgedit-settings .imgedit-scale input[type="text"],
- .imgedit-settings .imgedit-crop-ratio input[type="text"],
- .imgedit-settings .imgedit-crop-sel input[type="text"] {
+ .image-editor .imgedit-scale input[type="text"],
+ .image-editor .imgedit-crop-ratio input[type="text"],
+ .image-editor .imgedit-crop-sel input[type="text"] {
font-size: 16px;
padding: 6px 10px;
}
.wp_attachment_holder .imgedit-wrap .imgedit-panel-content,
- .wp_attachment_holder .imgedit-wrap .imgedit-settings {
+ .wp_attachment_holder .imgedit-wrap .image-editor {
float: none;
width: auto;
max-width: none;
@@ -1276,16 +1320,16 @@
}
.media-modal .imgedit-wrap .imgedit-panel-content,
- .media-modal .imgedit-wrap .imgedit-settings {
+ .media-modal .imgedit-wrap .image-editor {
position: initial !important;
}
- .media-modal .imgedit-wrap .imgedit-settings {
+ .media-modal .imgedit-wrap .image-editor {
box-sizing: border-box;
width: 100% !important;
}
- .imgedit-settings .imgedit-scale-button-wrapper {
+ .image-editor .imgedit-scale-button-wrapper {
display: inline-block;
}
}
@@ -1299,7 +1343,6 @@
/**
* Media queries for media grid.
*/
-
@media only screen and (max-width: 1120px) {
/* override for media-views.css */
#wp-media-grid .wp-filter .attachment-filters {
@@ -1307,6 +1350,23 @@
}
}
+@media only screen and (max-width: 1000px) {
+ /* override for forms.css */
+ .wp-filter p.search-box {
+ float: none;
+ width: 100%;
+ margin-bottom: 20px;
+ display: flex;
+ flex-wrap: nowrap;
+ column-gap: 0;
+ }
+
+ .wp-filter p.search-box #media-search-input {
+ width: 100%;
+ }
+
+}
+
@media only screen and (max-width: 782px) {
.media-frame.mode-select .attachments-browser.fixed .media-toolbar {
top: 46px;
@@ -1366,3 +1426,17 @@
max-width: 100%;
}
}
+
+@media only screen and (max-width: 375px) {
+ .media-item .attachment-tools {
+ align-items: baseline;
+ }
+ .media-item .edit-attachment.copy-to-clipboard-container {
+ flex-direction: column;
+ }
+
+ .copy-to-clipboard-container .success {
+ line-height: normal;
+ margin-top: 10px;
+ }
+}