diff -r 7b1b88e27a20 -r 48c4eec2b7e6 wp/wp-admin/css/media-rtl.css --- 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; + } +}