diff -r 7b1b88e27a20 -r 48c4eec2b7e6 wp/wp-includes/css/media-views-rtl.css --- a/wp/wp-includes/css/media-views-rtl.css Thu Sep 29 08:06:27 2022 +0200 +++ b/wp/wp-includes/css/media-views-rtl.css Fri Sep 05 18:40:08 2025 +0200 @@ -46,12 +46,10 @@ } .media-frame a: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; color: #043959; /* Only visible in Windows High Contrast mode */ - outline: 1px solid transparent; + outline: 2px solid transparent; } .media-frame a.button { @@ -101,6 +99,7 @@ color: #2c3338; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 13px; + line-height: 1.38461538; } .media-frame input[type="text"], @@ -281,10 +280,6 @@ width: calc(48% - 12px); } -.media-modal-content .attachments-browser .search { - width: 100%; -} - /* higher specificity */ .wp-core-ui .media-modal-icon { background-image: url(../images/uploader-icons.png); @@ -371,7 +366,7 @@ } .media-sidebar h2, -.image-details h2:not(.media-attachments-filter-heading) { +.image-details .media-embed h2 { position: relative; font-weight: 600; text-transform: uppercase; @@ -388,6 +383,11 @@ margin: 0 0 10px; } +.attachment-details h2 { + display: grid; + grid-template-columns: auto 5em; +} + .media-sidebar .collection-settings .setting { margin: 1px 0; } @@ -477,7 +477,7 @@ min-height: 0; line-height: 2.18181818; text-align: right; - color: #008a20; + color: #007017; } .compat-item label span { @@ -530,6 +530,13 @@ resize: vertical; } +.media-sidebar .alt-text textarea, +.attachment-details .alt-text textarea, +.compat-item .alt-text textarea, +.alt-text textarea { + height: 50px; +} + .compat-item { float: right; width: 100%; @@ -646,12 +653,10 @@ } .media-menu .media-menu-item: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; color: #043959; /* Only visible in Windows High Contrast mode */ - outline: 1px solid transparent; + outline: 2px solid transparent; } .media-menu .separator { @@ -701,12 +706,10 @@ } .media-router .media-menu-item: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; color: #043959; /* Only visible in Windows High Contrast mode */ - outline: 1px solid transparent; + outline: 2px solid transparent; } .media-router .active, @@ -852,6 +855,7 @@ height: 100%; } +.options-general-php .crop-content.site-icon, .wp-customizer:not(.mobile) .media-frame-content .crop-content.site-icon { margin-left: 300px; } @@ -899,8 +903,6 @@ .media-frame select.attachment-filters:last-of-type { margin-left: 0; - width: auto; - max-width: 100%; } /** @@ -919,7 +921,7 @@ max-width: 100%; } -.media-frame .media-search-input-label { +.media-modal .media-frame .media-search-input-label { position: absolute; right: 0; top: 10px; @@ -1212,6 +1214,8 @@ .mode-grid .attachments-browser .media-toolbar-primary { display: flex; align-items: center; + column-gap: .5rem; + margin: 11px 0; } .mode-grid .attachments-browser .media-toolbar-mode-select .media-toolbar-primary { @@ -1318,47 +1322,6 @@ outline: 2px dotted #c3c4c7; } -.load-more-wrapper { - clear: both; - display: flex; - flex-wrap: wrap; - align-items: center; - justify-content: center; - padding: 1em 0; -} - -.load-more-wrapper .load-more-count { - min-width: 100%; - margin: 0 0 1em; - text-align: center; -} - -.load-more-wrapper .load-more { - margin: 0; -} - -/* Needs high specificity. */ -.media-frame .load-more-wrapper .load-more + .spinner { - float: none; - margin: 0 10px 0 -30px; -} - -/* Reset spinner margin when the button is hidden to avoid horizontal scrollbar. */ -.media-frame .load-more-wrapper .load-more.hidden + .spinner { - margin: 0; -} - -/* Force a new row within the flex container. */ -.load-more-wrapper::after { - content: ""; - min-width: 100%; - order: 1; -} - -.load-more-wrapper .load-more-jump { - margin: 0 12px 0 0; -} - /** * Progress Bar */ @@ -1766,6 +1729,12 @@ vertical-align: middle; } +.media-frame .media-sidebar .settings-save-status .spinner { + position: absolute; + left: 0; + top: 0; +} + .media-frame.mode-grid .spinner { margin: 0; float: none; @@ -1795,7 +1764,7 @@ } .attachment-details .settings-save-status { - float: left; + text-align: left; text-transform: none; font-weight: 400; } @@ -1952,32 +1921,7 @@ .media-modal .imgedit-wrap .imgedit-panel-content { padding: 16px 16px 0; - position: absolute; - top: 0; - left: 282px; - bottom: 0; - right: 0; - 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: #f6f7f7; - border-right: 1px solid #dcdcde; - padding: 20px 16px 0; - position: absolute; - top: 0; - left: 0; - bottom: 0; - width: 250px; - overflow: auto; + overflow: visible; } /* @@ -1991,19 +1935,15 @@ .media-modal .imgedit-group { background: none; border: none; - border-bottom: 1px solid #dcdcde; box-shadow: none; margin: 0; - margin-bottom: 16px; padding: 0; - padding-bottom: 16px; position: relative; /* RTL fix, #WP29352 */ } -.media-modal .imgedit-group:last-of-type { - border: none; - margin: 0; - padding: 0; +.media-modal .imgedit-group.imgedit-panel-active { + margin-bottom: 16px; + padding-bottom: 16px; } .media-modal .imgedit-group-top { @@ -2044,8 +1984,8 @@ .wp-core-ui.media-modal .image-editor .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; } @@ -2072,8 +2012,7 @@ .media-modal .imgedit-wrap div.updated, /* Back-compat for pre-5.5 */ .media-modal .imgedit-wrap .notice { - margin: 0; - margin-bottom: 16px; + margin: 0 16px; } /** @@ -2162,8 +2101,8 @@ } .mejs-container:focus { - outline: 1px solid #4f94d4; - box-shadow: 0 0 2px 1px rgba(79, 148, 212, 0.8); + outline: 1px solid #2271b1; + box-shadow: 0 0 0 2px #2271b1; } .image-details .media-modal { @@ -2550,7 +2489,6 @@ /* 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; @@ -2594,6 +2532,10 @@ width: 230px; } + .options-general-php .crop-content.site-icon { + margin-left: 262px; + } + .attachments-browser .attachments, .attachments-browser .uploader-inline, .attachments-browser .media-toolbar, @@ -2602,6 +2544,16 @@ left: 262px; } + .attachments-browser .media-toolbar { + height: 82px; + } + + .attachments-browser .attachments, + .attachments-browser .uploader-inline, + .media-frame-content .attachments-browser .attachments-wrapper { + top: 82px; + } + .media-sidebar .setting, .attachment-details .setting { margin: 6px 0; @@ -2799,6 +2751,7 @@ .media-frame textarea, .media-frame select { font-size: 16px; + line-height: 1.5; } .media-frame .media-toolbar input[type="search"] { @@ -2811,13 +2764,8 @@ } @media screen and (max-width: 782px) { - .attachments-browser .media-toolbar { - height: 82px; - } - - .attachments-browser .attachments, - .attachments-browser .uploader-inline { - top: 82px; + .imgedit-panel-content { + grid-template-columns: auto; } .media-frame-toolbar .media-toolbar { @@ -2825,7 +2773,12 @@ } .mode-grid .attachments-browser .media-toolbar-primary { - display: block; + display: grid; + grid-template-columns: auto 1fr; + } + + .mode-grid .attachments-browser .media-toolbar-primary input[type="search"] { + width: 100%; } .media-sidebar .copy-to-clipboard-container .success, @@ -2833,6 +2786,34 @@ font-size: 14px; line-height: 2.71428571; } + + .media-frame .wp-filter .media-toolbar-secondary { + position: unset; + } + + .media-frame .media-toolbar-secondary .spinner { + position: absolute; + top: 0; + bottom: 0; + margin: auto; + right: 0; + left: 0; + z-index: 9; + } + + .media-bg-overlay { + content: ''; + background: #ffffff; + width: 100%; + height: 100%; + display: none; + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + opacity: 0.6; + } } /* Responsive on portrait and landscape */ @@ -2851,6 +2832,10 @@ position: fixed; } + .options-general-php .crop-content.site-icon { + margin-left: 0; + } + .media-sidebar { z-index: 1900; max-width: 70%; @@ -2870,10 +2855,6 @@ left: 0; } - .attachments-browser .attachments-wrapper { - padding-top: 12px; - } - .image-details .media-frame-title { display: block; top: 0; @@ -2927,7 +2908,6 @@ * HiDPI Displays */ @media print, - (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { .wp-core-ui .media-modal-icon {