diff -r 34716fd837a4 -r be944660c56a wp/wp-includes/css/media-views-rtl.css --- a/wp/wp-includes/css/media-views-rtl.css Tue Dec 15 15:52:01 2020 +0100 +++ b/wp/wp-includes/css/media-views-rtl.css Wed Sep 21 18:19:35 2022 +0200 @@ -37,29 +37,29 @@ .media-frame a { border-bottom: none; - color: #0073aa; + color: #2271b1; } .media-frame a:hover, .media-frame a:active { - color: #006799; + color: #135e96; } .media-frame a:focus { box-shadow: - 0 0 0 1px #5b9dd9, - 0 0 2px 1px rgba(30, 140, 190, 0.8); - color: #124964; + 0 0 0 1px #4f94d4, + 0 0 2px 1px rgba(79, 148, 212, 0.8); + color: #043959; /* Only visible in Windows High Contrast mode */ outline: 1px solid transparent; } .media-frame a.button { - color: #32373c; + color: #2c3338; } .media-frame a.button:hover { - color: #23282d; + color: #1d2327; } .media-frame a.button-primary, @@ -96,9 +96,9 @@ .media-frame select { box-shadow: 0 0 0 transparent; border-radius: 4px; - border: 1px solid #7e8993; + border: 1px solid #8c8f94; background-color: #fff; - color: #32373c; + color: #2c3338; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 13px; } @@ -135,8 +135,8 @@ .media-frame input[type="url"]:focus, .media-frame textarea:focus, .media-frame select:focus { - border-color: #007cba; - box-shadow: 0 0 0 1px #007cba; + border-color: #3582c4; + box-shadow: 0 0 0 1px #3582c4; outline: 2px solid transparent; } @@ -144,7 +144,7 @@ .media-frame textarea:disabled, .media-frame input[readonly], .media-frame textarea[readonly] { - background-color: #eee; + background-color: #f0f0f1; } .media-frame input[type="search"] { @@ -152,16 +152,16 @@ } .media-frame ::-webkit-input-placeholder { - color: #72777c; + color: #646970; } .media-frame ::-moz-placeholder { - color: #72777c; + color: #646970; opacity: 1; } .media-frame :-ms-input-placeholder { - color: #72777c; + color: #646970; } /* @@ -228,7 +228,7 @@ padding: 0; border: 1px solid transparent; background: none; - color: #666; + color: #646970; z-index: 1000; cursor: pointer; outline: none; @@ -237,13 +237,13 @@ .media-modal-close:hover, .media-modal-close:active { - color: #006799; + color: #135e96; } .media-modal-close:focus { - color: #006799; - border-color: #5b9dd9; - box-shadow: 0 0 3px rgba(0, 115, 170, 0.8); + color: #135e96; + border-color: #4f94d4; + box-shadow: 0 0 3px rgba(34, 113, 177, 0.8); /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; } @@ -255,7 +255,7 @@ .media-modal-close .media-modal-icon:before { content: "\f158"; font: normal 20px/1 dashicons; - speak: none; + speak: never; vertical-align: middle; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; @@ -270,7 +270,7 @@ overflow: auto; min-height: 300px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.7); - background: #fcfcfc; + background: #fff; -webkit-font-smoothing: subpixel-antialiased; } @@ -302,7 +302,7 @@ z-index: 100; height: 60px; padding: 0 16px; - border: 0 solid #ddd; + border: 0 solid #dcdcde; overflow: hidden; } @@ -311,7 +311,7 @@ bottom: -47px; height: auto; overflow: visible; - border-top: 1px solid #ddd; + border-top: 1px solid #dcdcde; } .media-toolbar-primary { @@ -349,8 +349,8 @@ width: 267px; padding: 0 16px; z-index: 75; - background: #f3f3f3; - border-right: 1px solid #ddd; + background: #f6f7f7; + border-right: 1px solid #dcdcde; overflow: auto; -webkit-overflow-scrolling: touch; } @@ -371,12 +371,12 @@ } .media-sidebar h2, -.image-details h2 { +.image-details h2:not(.media-attachments-filter-heading) { position: relative; font-weight: 600; text-transform: uppercase; font-size: 12px; - color: #666; + color: #646970; margin: 24px 0 8px; } @@ -451,7 +451,7 @@ padding-top: 8px; line-height: 1.33333333; font-weight: 400; - color: #666; + color: #646970; } .media-sidebar .checkbox-label-inline { @@ -475,7 +475,9 @@ .attachment-details .copy-to-clipboard-container .success { padding: 0; min-height: 0; + line-height: 2.18181818; text-align: right; + color: #008a20; } .compat-item label span { @@ -603,13 +605,11 @@ bottom: 0; margin: 0; padding: 50px 0 10px; - background: #f3f3f3; + background: #f6f7f7; border-left-width: 1px; border-left-style: solid; - border-left-color: #ccc; + border-left-color: #c3c4c7; -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; user-select: none; } @@ -624,7 +624,7 @@ font-size: 14px; line-height: 1.28571428; background: transparent; - color: #0073aa; + color: #2271b1; text-align: right; text-decoration: none; cursor: pointer; @@ -635,21 +635,21 @@ } .media-menu .media-menu-item:active { - color: #0073aa; + color: #2271b1; outline: none; } .media-menu .active, .media-menu .active:hover { - color: #23282d; + color: #1d2327; font-weight: 600; } .media-menu .media-menu-item:focus { box-shadow: - 0 0 0 1px #5b9dd9, - 0 0 2px 1px rgba(30, 140, 190, 0.8); - color: #124964; + 0 0 0 1px #4f94d4, + 0 0 2px 1px rgba(79, 148, 212, 0.8); + color: #043959; /* Only visible in Windows High Contrast mode */ outline: 1px solid transparent; } @@ -658,7 +658,7 @@ height: 0; margin: 12px 20px; padding: 0; - border-top: 1px solid #ddd; + border-top: 1px solid #dcdcde; } /** @@ -692,19 +692,19 @@ .media-router .media-menu-item:hover, .media-router .media-menu-item:active { - color: #0073aa; + color: #2271b1; } .media-router .active, .media-router .active:hover { - color: #23282d; + color: #1d2327; } .media-router .media-menu-item:focus { box-shadow: - 0 0 0 1px #5b9dd9, - 0 0 2px 1px rgba(30, 140, 190, 0.8); - color: #124964; + 0 0 0 1px #4f94d4, + 0 0 2px 1px rgba(79, 148, 212, 0.8); + color: #043959; /* Only visible in Windows High Contrast mode */ outline: 1px solid transparent; } @@ -713,7 +713,7 @@ .media-router .media-menu-item.active:last-child { margin: -1px -1px 0; background: #fff; - border: 1px solid #ddd; + border: 1px solid #dcdcde; border-bottom: none; } @@ -771,7 +771,7 @@ margin: 0; overflow: auto; background: #fff; - border-top: 1px solid #ddd; + border-top: 1px solid #dcdcde; } .media-frame-toolbar { @@ -910,7 +910,7 @@ margin: 32px 0 0; padding: 4px; font-size: 13px; - color: #444; + color: #3c434a; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; -webkit-appearance: none; } @@ -943,13 +943,11 @@ float: right; padding: 8px; margin: 0; - color: #444; + color: #3c434a; cursor: pointer; list-style: none; text-align: center; -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; user-select: none; width: 25%; box-sizing: border-box; @@ -960,7 +958,7 @@ .wp-core-ui .attachment.details:focus { box-shadow: inset 0 0 2px 3px #fff, - inset 0 0 0 7px #5b9dd9; + inset 0 0 0 7px #4f94d4; /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; outline-offset: -6px; @@ -969,13 +967,13 @@ .wp-core-ui .selected.attachment { box-shadow: inset 0 0 0 5px #fff, - inset 0 0 0 7px #ccc; + inset 0 0 0 7px #c3c4c7; } .wp-core-ui .attachment.details { box-shadow: inset 0 0 0 3px #fff, - inset 0 0 0 7px #0073aa; + inset 0 0 0 7px #2271b1; } .wp-core-ui .attachment-preview { @@ -983,7 +981,7 @@ box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(0, 0, 0, 0.05); - background: #eee; + background: #f0f0f1; cursor: pointer; } @@ -1104,7 +1102,7 @@ top: 0; left: 0; outline: none; - background: #eee; + background: #f0f0f1; cursor: pointer; box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba(0, 0, 0, 0.15); } @@ -1128,10 +1126,10 @@ .wp-core-ui .attachment.details .check, .wp-core-ui .attachment.selected .check:focus, .wp-core-ui .media-frame.mode-grid .attachment.selected .check { - background-color: #0073aa; + background-color: #2271b1; box-shadow: 0 0 0 1px #fff, - 0 0 0 2px #0073aa; + 0 0 0 2px #2271b1; } .wp-core-ui .attachment.selected .check:focus { @@ -1191,7 +1189,8 @@ padding: 2px 8px 8px; } -.attachments-browser .attachments, +.attachments-browser:not(.has-load-more) .attachments, +.attachments-browser.has-load-more .attachments-wrapper, .attachments-browser .uploader-inline { position: absolute; top: 72px; @@ -1240,7 +1239,7 @@ .uploader-inline .close:before { font: normal 30px/1 dashicons !important; - color: #555d66; + color: #50575e; display: inline-block; content: "\f335"; font-weight: 300; @@ -1248,8 +1247,8 @@ } .uploader-inline .close:focus { - outline: 1px solid #5b9dd9; - box-shadow: 0 0 3px rgba(0, 115, 170, 0.8); + outline: 1px solid #4f94d4; + box-shadow: 0 0 3px rgba(34, 113, 177, 0.8); } .attachments-browser.hide-sidebar .attachments, @@ -1263,13 +1262,103 @@ margin-top: 16px; line-height: 1.38461538; font-size: 13px; - color: #666; + color: #646970; } .attachments-browser .no-media { padding: 2em 2em 0 0; } +.more-loaded .attachment:not(.found-media) { + background: #dcdcde; +} + +.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; +} + +.attachment.new-media { + 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 */ @@ -1279,7 +1368,7 @@ width: 70%; margin: 10px auto; border-radius: 10px; - background: #ddd; + background: #dcdcde; background: rgba(0, 0, 0, 0.1); } @@ -1287,7 +1376,7 @@ height: 10px; min-width: 20px; width: 0; - background: #0073aa; + background: #2271b1; border-radius: 10px; transition: width 300ms; } @@ -1323,7 +1412,7 @@ .media-uploader-status .upload-details { display: none; font-size: 12px; - color: #666; + color: #646970; } .uploading.media-uploader-status .upload-details { @@ -1335,7 +1424,7 @@ } .media-uploader-status .upload-count { - color: #444; + color: #3c434a; } .media-uploader-status .upload-dismiss-errors, @@ -1367,29 +1456,29 @@ content: "\f153"; display: block; font: normal 16px/1 dashicons; - color: #72777c; + color: #787c82; } .uploader-inline .errors.media-uploader-status .upload-dismiss-errors::before { - color: #606a73; + color: #646970; } .errors.media-uploader-status .upload-dismiss-errors:hover::before, .errors.media-uploader-status .upload-dismiss-errors:focus::before { - color: #c00; + color: #d63638; } .upload-errors .upload-error { padding: 12px; margin-bottom: 12px; background: #fff; - border-right: 4px solid #dc3232; + border-right: 4px solid #d63638; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); } .uploader-inline .upload-errors .upload-error { padding: 12px 30px; - background-color: #fbeaea; + background-color: #fcf0f1; box-shadow: none; } @@ -1426,12 +1515,12 @@ .wp-editor-wrap .uploader-editor { position: absolute; z-index: 99998; /* under the toolbar */ - background: rgba(150, 150, 150, 0.9); + background: rgba(140, 143, 148, 0.9); } .uploader-window, .wp-editor-wrap .uploader-editor.droppable { - background: rgba(0, 86, 132, 0.9); + background: rgba(10, 75, 120, 0.9); } .uploader-window-content, @@ -1519,7 +1608,7 @@ .uploader-inline .has-upload-message .upload-instructions { font-size: 14px; - color: #444; + color: #3c434a; font-weight: 400; } @@ -1591,14 +1680,14 @@ padding: 1px 8px; margin: 1px -8px 1px 8px; line-height: 1.4; - border-left: 1px solid #ddd; - color: #0073aa; + border-left: 1px solid #dcdcde; + color: #2271b1; text-decoration: none; } .media-selection .button-link:hover, .media-selection .button-link:focus { - color: #006799; + color: #135e96; } .media-selection .button-link:last-child { @@ -1607,12 +1696,12 @@ } .selection-info .clear-selection { - color: #bc0b0b; + color: #d63638; } .selection-info .clear-selection:hover, .selection-info .clear-selection:focus { - color: #dc3232; + color: #d63638; } .media-selection .selection-view { @@ -1656,7 +1745,7 @@ .wp-core-ui .media-selection .attachment.details:focus { box-shadow: 0 0 0 1px #fff, - 0 0 2px 3px #5b9dd9; + 0 0 2px 3px #4f94d4; /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; } @@ -1668,7 +1757,7 @@ .wp-core-ui .media-selection .attachment.details { box-shadow: 0 0 0 1px #fff, - 0 0 0 3px #0073aa; + 0 0 0 3px #2271b1; } .media-selection:after { @@ -1679,7 +1768,7 @@ left: 0; bottom: 0; width: 25px; - background-image: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); + background-image: linear-gradient(to right,#fff,rgba(255, 255, 255, 0)); } .media-selection .attachment .filename { @@ -1759,14 +1848,22 @@ min-height: 60px; margin-bottom: 16px; line-height: 1.5; - color: #666; - border-bottom: 1px solid #ddd; + color: #646970; + border-bottom: 1px solid #dcdcde; padding-bottom: 11px; } +.attachment-info .wp-media-wrapper { + margin-bottom: 8px; +} + +.attachment-info .wp-media-wrapper.wp-audio { + margin-top: 13px; +} + .attachment-info .filename { font-weight: 600; - color: #444; + color: #3c434a; word-wrap: break-word; } @@ -1837,7 +1934,7 @@ .media-modal .untrash-attachment { display: inline; padding: 0; - color: #bc0b0b; + color: #d63638; } .media-modal .delete-attachment:hover, @@ -1846,7 +1943,7 @@ .media-modal .trash-attachment:focus, .media-modal .untrash-attachment:hover, .media-modal .untrash-attachment:focus { - color: #dc3232; + color: #d63638; } /** @@ -1898,8 +1995,8 @@ } .media-modal .imgedit-wrap .imgedit-settings { - background: #f3f3f3; - border-right: 1px solid #ddd; + background: #f6f7f7; + border-right: 1px solid #dcdcde; padding: 20px 16px 0; position: absolute; top: 0; @@ -1920,7 +2017,7 @@ .media-modal .imgedit-group { background: none; border: none; - border-bottom: 1px solid #ddd; + border-bottom: 1px solid #dcdcde; box-shadow: none; margin: 0; margin-bottom: 16px; @@ -1944,7 +2041,7 @@ display: inline-block; text-transform: uppercase; font-size: 12px; - color: #666; + color: #646970; margin: 0; margin-top: 3px; } @@ -1952,7 +2049,7 @@ .media-modal .imgedit-group-top h2 a, .media-modal .imgedit-group-top h2 .button-link { text-decoration: none; - color: #666; + color: #646970; } /* higher specificity than media.css */ @@ -1963,7 +2060,7 @@ margin: 0; padding: 0; background: transparent; - color: #0074a2; + color: #2271b1; font-size: 20px; line-height: 1; cursor: pointer; @@ -1972,9 +2069,9 @@ } .wp-core-ui.media-modal .image-editor .imgedit-help-toggle:focus { - color: #0074a2; - border-color: #5b9dd9; - box-shadow: 0 0 3px rgba(0, 115, 170, 0.8); + color: #2271b1; + border-color: #4f94d4; + box-shadow: 0 0 3px rgba(34, 113, 177, 0.8); /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; } @@ -2087,8 +2184,8 @@ } .mejs-container:focus { - outline: 1px solid #5b9dd9; - box-shadow: 0 0 2px 1px rgba(30, 140, 190, 0.8); + outline: 1px solid #4f94d4; + box-shadow: 0 0 2px 1px rgba(79, 148, 212, 0.8); } .image-details .media-modal { @@ -2118,8 +2215,8 @@ } .image-details .column-settings { - background: #f3f3f3; - border-left: 1px solid #ddd; + background: #f6f7f7; + border-left: 1px solid #dcdcde; min-height: 100%; width: 55%; position: absolute; @@ -2130,8 +2227,8 @@ .image-details .column-settings h2 { margin: 20px; padding-top: 20px; - border-top: 1px solid #ddd; - color: #23282d; + border-top: 1px solid #dcdcde; + color: #1d2327; } .image-details .column-image { @@ -2152,19 +2249,19 @@ .image-details .advanced-toggle { padding: 0; - color: #666; + color: #646970; text-transform: uppercase; text-decoration: none; } .image-details .advanced-toggle:hover, .image-details .advanced-toggle:active { - color: #666; + color: #646970; } .image-details .advanced-toggle:after { font: normal 20px/1 dashicons; - speak: none; + speak: never; vertical-align: top; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; @@ -2319,7 +2416,7 @@ display: inline-block; font-size: 13px; line-height: 1.84615384; - color: #666; + color: #646970; } .media-embed .setting span { @@ -2456,7 +2553,7 @@ left: auto; bottom: auto; padding: 5px 0; - border: 1px solid #ccc; + border: 1px solid #c3c4c7; } .media-frame:not(.hide-menu) .media-menu.visible { @@ -2521,7 +2618,9 @@ .attachments-browser .attachments, .attachments-browser .uploader-inline, - .attachments-browser .media-toolbar { + .attachments-browser .media-toolbar, + .attachments-browser .attachments-wrapper, + .attachments-browser.has-load-more .attachments-wrapper { left: 262px; } @@ -2788,10 +2887,15 @@ .attachments-browser .attachments, .attachments-browser .uploader-inline, - .attachments-browser .media-toolbar { + .attachments-browser .media-toolbar, + .media-frame-content .attachments-browser .attachments-wrapper { left: 0; } + .attachments-browser .attachments-wrapper { + padding-top: 12px; + } + .image-details .media-frame-title { display: block; top: 0; @@ -2813,6 +2917,12 @@ .media-frame-content .media-toolbar .instructions { display: none; } + + /* Change margin direction on load more button in responsive views. */ + .load-more-wrapper .load-more-jump { + margin: 12px 0 0 0; + } + } @media only screen and (min-width: 901px) and (max-height: 400px) { @@ -2821,6 +2931,12 @@ top: 0; padding-top: 44px; } + + /* Change margin direction on load more button in responsive views. */ + .load-more-wrapper .load-more-jump { + margin: 12px 0 0 0; + } + } @media only screen and (max-width: 480px) {