--- a/wp/wp-admin/css/media.css Thu Sep 29 08:06:27 2022 +0200
+++ b/wp/wp-admin/css/media.css Fri Sep 05 18:40:08 2025 +0200
@@ -112,14 +112,8 @@
margin-right: 10px;
}
-.media-item-wrapper {
- display: grid;
- grid-template-columns: 1fr 1fr;
-}
-
.media-item .attachment-tools {
display: flex;
- justify-content: flex-end;
align-items: center;
}
@@ -130,6 +124,7 @@
}
.media-item .edit-attachment.copy-to-clipboard-container {
+ display: flex;
margin-top: 0;
}
@@ -189,15 +184,10 @@
display: none;
}
-.media-item .original {
- position: relative;
- height: 34px;
-}
-
.media-item .progress {
- float: right;
+ display: inline-block;
height: 22px;
- margin: 7px 6px;
+ margin: 0 6px 7px;
width: 200px;
line-height: 2em;
padding: 0;
@@ -355,9 +345,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;
@@ -455,6 +443,10 @@
position: relative;
}
+.post-type-attachment .wp-filter select {
+ margin: 0 6px 0 0;
+}
+
/**
* Media Library grid view
*/
@@ -532,9 +524,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;
@@ -583,16 +573,10 @@
margin-top: 0;
}
-.media-search-input-label {
- margin: 0 .2em 0 0;
+.media-frame-content .media-search-input-label {
vertical-align: baseline;
}
-.media-frame.mode-grid .media-search-input-label {
- position: static;
- margin: 0 .5em 0 0;
-}
-
.attachments-browser .media-toolbar-secondary > .media-button {
margin-right: 10px;
}
@@ -781,8 +765,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 {
@@ -838,7 +822,7 @@
}
.copy-to-clipboard-container .success {
- color: #008a20;
+ color: #007017;
margin-left: 8px;
}
@@ -849,6 +833,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;
}
@@ -872,16 +861,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;
}
@@ -893,19 +882,31 @@
height: auto;
}
-.wp_attachment_holder .imgedit-wrap .imgedit-panel-content {
- float: left;
- padding: 3px 16px 0 0;
- 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: right;
width: 250px;
}
-.imgedit-settings input {
+.image-editor input {
margin-top: 0;
vertical-align: middle;
}
@@ -940,7 +941,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;
@@ -964,10 +965,6 @@
float: left;
}
-.imgedit-menu {
- margin: 0 0 12px;
-}
-
.imgedit-menu .note-no-rotate {
clear: both;
margin: 0;
@@ -980,10 +977,10 @@
min-height: 28px;
font-size: 13px;
line-height: 2;
- margin: 0 8px 8px 0;
padding: 0 10px;
}
+.imgedit-menu .button:after,
.imgedit-menu .button:before {
font: normal 16px/1 dashicons;
margin-right: 8px;
@@ -995,6 +992,16 @@
-moz-osx-font-smoothing: grayscale;
}
+.imgedit-menu .imgedit-rotate.button:after {
+ content: '\f140';
+ margin-left: 2px;
+ margin-right: 0;
+}
+
+.imgedit-menu .imgedit-rotate.button[aria-expanded="true"]:after {
+ content: '\f142';
+}
+
.imgedit-menu .button.disabled {
color: #a7aaad;
border-color: #dcdcde;
@@ -1009,22 +1016,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";
}
@@ -1043,23 +1042,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: 0 0, 10px 10px;
+ background-size: 20px 20px;
+}
+
+
.imgedit-crop {
margin: 0 8px 0 0;
}
-.imgedit-rleft {
- margin: 0 3px;
-}
-
-.imgedit-rright {
- margin: 0 8px 0 3px;
-}
-
-.imgedit-flipv {
- margin: 0 3px;
-}
-
-.imgedit-fliph {
+.imgedit-rotate {
margin: 0 8px 0 3px;
}
@@ -1071,6 +1066,12 @@
margin: 0 8px 0 3px;
}
+.imgedit-thumbnail-preview-group {
+ display: flex;
+ flex-wrap: wrap;
+ column-gap: 10px;
+}
+
.imgedit-thumbnail-preview {
margin: 10px 8px 0 0;
}
@@ -1097,11 +1098,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;
}
@@ -1124,8 +1155,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;
}
@@ -1134,10 +1165,6 @@
padding: 0;
}
-.imgedit-submit {
- margin: 8px 0 0;
-}
-
.imgedit-submit-btn {
margin-left: 20px;
}
@@ -1149,8 +1176,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;
@@ -1165,17 +1195,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;
@@ -1189,12 +1221,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;
}
@@ -1223,7 +1255,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);
@@ -1231,11 +1262,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;
@@ -1250,15 +1294,15 @@
padding: 10px 0 10px 12px;
}
- .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;
@@ -1275,16 +1319,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;
}
}
@@ -1298,7 +1342,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 {
@@ -1306,6 +1349,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;
@@ -1365,3 +1425,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;
+ }
+}