diff -r 7b1b88e27a20 -r 48c4eec2b7e6 wp/wp-includes/css/media-views.css --- a/wp/wp-includes/css/media-views.css Thu Sep 29 08:06:27 2022 +0200 +++ b/wp/wp-includes/css/media-views.css Fri Sep 05 18:40:08 2025 +0200 @@ -45,12 +45,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 { @@ -100,6 +98,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"], @@ -280,10 +279,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); @@ -370,7 +365,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; @@ -387,6 +382,11 @@ margin: 0 0 10px; } +.attachment-details h2 { + display: grid; + grid-template-columns: auto 5em; +} + .media-sidebar .collection-settings .setting { margin: 1px 0; } @@ -476,7 +476,7 @@ min-height: 0; line-height: 2.18181818; text-align: left; - color: #008a20; + color: #007017; } .compat-item label span { @@ -529,6 +529,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: left; width: 100%; @@ -645,12 +652,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 { @@ -700,12 +705,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, @@ -851,6 +854,7 @@ height: 100%; } +.options-general-php .crop-content.site-icon, .wp-customizer:not(.mobile) .media-frame-content .crop-content.site-icon { margin-right: 300px; } @@ -898,8 +902,6 @@ .media-frame select.attachment-filters:last-of-type { margin-right: 0; - width: auto; - max-width: 100%; } /** @@ -918,7 +920,7 @@ max-width: 100%; } -.media-frame .media-search-input-label { +.media-modal .media-frame .media-search-input-label { position: absolute; left: 0; top: 10px; @@ -1211,6 +1213,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 { @@ -1317,47 +1321,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 -30px 0 10px; -} - -/* 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 0 0 12px; -} - /** * Progress Bar */ @@ -1765,6 +1728,12 @@ vertical-align: middle; } +.media-frame .media-sidebar .settings-save-status .spinner { + position: absolute; + right: 0; + top: 0; +} + .media-frame.mode-grid .spinner { margin: 0; float: none; @@ -1794,7 +1763,7 @@ } .attachment-details .settings-save-status { - float: right; + text-align: right; text-transform: none; font-weight: 400; } @@ -1951,32 +1920,7 @@ .media-modal .imgedit-wrap .imgedit-panel-content { padding: 16px 16px 0; - position: absolute; - top: 0; - right: 282px; - bottom: 0; - left: 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-left: 1px solid #dcdcde; - padding: 20px 16px 0; - position: absolute; - top: 0; - right: 0; - bottom: 0; - width: 250px; - overflow: auto; + overflow: visible; } /* @@ -1990,19 +1934,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 { @@ -2043,8 +1983,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; } @@ -2071,8 +2011,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; } /** @@ -2161,8 +2100,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 { @@ -2549,7 +2488,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; @@ -2593,6 +2531,10 @@ width: 230px; } + .options-general-php .crop-content.site-icon { + margin-right: 262px; + } + .attachments-browser .attachments, .attachments-browser .uploader-inline, .attachments-browser .media-toolbar, @@ -2601,6 +2543,16 @@ right: 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; @@ -2798,6 +2750,7 @@ .media-frame textarea, .media-frame select { font-size: 16px; + line-height: 1.5; } .media-frame .media-toolbar input[type="search"] { @@ -2810,13 +2763,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 { @@ -2824,7 +2772,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, @@ -2832,6 +2785,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; + left: 0; + right: 0; + z-index: 9; + } + + .media-bg-overlay { + content: ''; + background: #ffffff; + width: 100%; + height: 100%; + display: none; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + opacity: 0.6; + } } /* Responsive on portrait and landscape */ @@ -2850,6 +2831,10 @@ position: fixed; } + .options-general-php .crop-content.site-icon { + margin-right: 0; + } + .media-sidebar { z-index: 1900; max-width: 70%; @@ -2869,10 +2854,6 @@ right: 0; } - .attachments-browser .attachments-wrapper { - padding-top: 12px; - } - .image-details .media-frame-title { display: block; top: 0; @@ -2926,7 +2907,6 @@ * HiDPI Displays */ @media print, - (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { .wp-core-ui .media-modal-icon {