diff -r 34716fd837a4 -r be944660c56a wp/wp-admin/css/media-rtl.css --- a/wp/wp-admin/css/media-rtl.css Tue Dec 15 15:52:01 2020 +0100 +++ b/wp/wp-admin/css/media-rtl.css Wed Sep 21 18:19:35 2022 +0200 @@ -6,7 +6,7 @@ .media-item .describe { border-collapse: collapse; width: 100%; - border-top: 1px solid #ddd; + border-top: 1px solid #dcdcde; clear: both; cursor: default; } @@ -52,6 +52,14 @@ max-width: 128px; } +.media-list-subtitle { + display: block; +} + +.media-list-title { + display: block; +} + #wpbody-content #async-upload-wrap a { display: none; } @@ -97,7 +105,6 @@ padding: 0 5px 0 0; } -.media-item .edit-attachment, .describe-toggle-on, .describe-toggle-off { display: block; @@ -106,6 +113,39 @@ 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; +} + +.media-item .edit-attachment { + padding: 14px 0; + display: block; + margin-left: 10px; +} + +.media-item .edit-attachment.copy-to-clipboard-container { + margin-top: 0; +} + +.media-item-copy-container .success { + line-height: 0; +} + +.media-item button .copy-attachment-url { + margin-top: 14px; +} + +.media-item .copy-to-clipboard-container { + margin-top: 7px; +} + .media-item .describe-toggle-off, .media-item.open .describe-toggle-on { display: none; @@ -116,7 +156,7 @@ } .media-upload-form .media-item { - min-height: 36px; + min-height: 70px; margin-bottom: 1px; position: relative; width: 100%; @@ -125,7 +165,7 @@ .media-upload-form .media-item, .media-upload-form .media-item .error { - box-shadow: 0 1px 0 #ddd; + box-shadow: 0 1px 0 #dcdcde; } #media-items:empty { @@ -133,16 +173,16 @@ } .media-item .filename { - line-height: 2.76923076; + padding: 14px 0; overflow: hidden; margin-right: 6px; } .media-item .pinkynail { float: right; - margin: 2px 3px 0 10px; - max-width: 40px; - max-height: 32px; + margin: 0 0 0 10px; + max-height: 70px; + max-width: 70px; } .media-item .startopen, @@ -164,7 +204,7 @@ padding: 0; overflow: hidden; border-radius: 22px; - background: #ddd; + background: #dcdcde; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); } @@ -174,7 +214,7 @@ height: 100%; margin-top: -22px; border-radius: 22px; - background-color: #0073aa; + background-color: #2271b1; box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3); } @@ -202,6 +242,10 @@ display: block; } +#html-upload-ui #async-upload { + font-size: 1em; +} + .media-upload-form .media-item.error, .media-upload-form .media-item .error { width: auto; @@ -210,6 +254,7 @@ .media-upload-form .media-item .error { padding: 10px 14px 10px 0; + min-height: 50px; } .media-item .error-div button.dismiss { @@ -235,8 +280,8 @@ } .find-box-head { - background: #fcfcfc; - border-bottom: 1px solid #ddd; + background: #fff; + border-bottom: 1px solid #dcdcde; height: 36px; font-size: 18px; font-weight: 600; @@ -302,18 +347,18 @@ cursor: pointer; text-align: center; background: none; - color: #666; + color: #646970; } #find-posts-close:hover, #find-posts-close:focus { - color: #006799; + color: #135e96; } #find-posts-close:focus { box-shadow: - 0 0 0 1px #5b9dd9, - 0 0 2px 1px rgba(30, 140, 190, 0.8); + 0 0 0 1px #4f94d4, + 0 0 2px 1px rgba(79, 148, 212, 0.8); /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; outline-offset: -2px; @@ -322,7 +367,7 @@ #find-posts-close:before { font: normal 20px/36px dashicons; vertical-align: top; - speak: none; + speak: never; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\f158"; @@ -330,8 +375,8 @@ .find-box-buttons { padding: 8px 16px; - background: #fcfcfc; - border-top: 1px solid #ddd; + background: #fff; + border-top: 1px solid #dcdcde; position: absolute; bottom: 0; right: 0; @@ -370,7 +415,7 @@ } .drag-drop #drag-drop-area { - border: 4px dashed #b4b9be; + border: 4px dashed #c3c4c7; height: 200px; } @@ -404,7 +449,7 @@ } border color while dragging a file over the uploader drop area */ .drag-drop.drag-over #drag-drop-area { - border-color: #83b4d8; + border-color: #9ec2e6; } #plupload-upload-ui { @@ -417,7 +462,8 @@ .media-frame.mode-grid, .media-frame.mode-grid .media-frame-content, -.media-frame.mode-grid .attachments-browser .attachments, +.media-frame.mode-grid .attachments-browser:not(.has-load-more) .attachments, +.media-frame.mode-grid .attachments-browser.has-load-more .attachments-wrapper, .media-frame.mode-grid .uploader-inline-content { position: static; } @@ -439,7 +485,7 @@ width: auto; margin-top: 12px; padding: 0 16px; - border-right: 4px solid #dd3d36; + border-right: 4px solid #d63638; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); background-color: #fff; } @@ -472,12 +518,12 @@ content: "\f153"; display: block; font: normal 16px/1 dashicons; - color: #72777c; + color: #787c82; } .upload-php .mode-grid .media-sidebar .media-uploader-status .upload-dismiss-errors:focus:before, .upload-php .mode-grid .media-sidebar .media-uploader-status .upload-dismiss-errors:hover:before { - color: #c00; + color: #d63638; } .upload-php .mode-grid .media-sidebar .media-uploader-status.errors h2 { @@ -492,10 +538,11 @@ bottom: auto; padding-top: 0; margin-top: 20px; - border: 4px dashed #b4b9be; + border: 4px dashed #c3c4c7; } -.media-frame.mode-select .attachments-browser.fixed .attachments { +.media-frame.mode-select .attachments-browser.fixed:not(.has-load-more) .attachments, +.media-frame.mode-select .attachments-browser.has-load-more.fixed .attachments-wrapper { position: relative; top: 94px; /* prevent jumping up when the toolbar becomes fixed */ padding-bottom: 94px; /* offset for above so the bottom doesn't get cut off */ @@ -505,8 +552,8 @@ .media-frame.mode-grid .selected.attachment:focus, .media-frame.mode-grid .attachment.details:focus { box-shadow: - inset 0 0 2px 3px #f1f1f1, - inset 0 0 0 7px #5b9dd9; + inset 0 0 2px 3px #f0f0f1, + inset 0 0 0 7px #4f94d4; /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; outline-offset: -6px; @@ -514,14 +561,14 @@ .media-frame.mode-grid .selected.attachment { box-shadow: - inset 0 0 0 5px #f1f1f1, - inset 0 0 0 7px #ccc; + inset 0 0 0 5px #f0f0f1, + inset 0 0 0 7px #c3c4c7; } .media-frame.mode-grid .attachment.details { box-shadow: - inset 0 0 0 3px #f1f1f1, - inset 0 0 0 7px #1e8cbe; + inset 0 0 0 3px #f0f0f1, + inset 0 0 0 7px #4f94d4; } .media-frame.mode-grid.mode-select .attachment .thumbnail { @@ -586,7 +633,7 @@ } .media-frame.mode-grid .attachments-browser .no-media { - color: #666; /* same as no plugins and no themes */ + color: #646970; /* same as no plugins and no themes */ font-size: 18px; font-style: normal; margin: 0; @@ -617,7 +664,7 @@ .edit-attachment-frame .edit-media-header .left, .edit-attachment-frame .edit-media-header .right { cursor: pointer; - color: #72777c; + color: #787c82; background-color: transparent; height: 50px; width: 50px; @@ -625,7 +672,7 @@ position: absolute; text-align: center; border: 0; - border-right: 1px solid #ddd; + border-right: 1px solid #dcdcde; transition: color .1s ease-in-out, background .1s ease-in-out; } @@ -660,8 +707,8 @@ .edit-attachment-frame .edit-media-header .right:hover, .edit-attachment-frame .edit-media-header .left:focus, .edit-attachment-frame .edit-media-header .right:focus { - background: #ddd; - border-color: #ccc; + background: #dcdcde; + border-color: #c3c4c7; color: #000; outline: none; box-shadow: none; @@ -690,7 +737,7 @@ .edit-attachment-frame .edit-media-header [disabled], .edit-attachment-frame .edit-media-header [disabled]:hover { - color: #ccc; + color: #c3c4c7; background: inherit; cursor: default; } @@ -734,7 +781,7 @@ max-width: 100%; max-height: 90%; max-height: calc( 100% - 42px ); /* leave space for actions underneath */ - background-image: linear-gradient(-45deg, #c4c4c4 25%, transparent 25%, transparent 75%, #c4c4c4 75%, #c4c4c4), linear-gradient(-45deg, #c4c4c4 25%, transparent 25%, transparent 75%, #c4c4c4 75%, #c4c4c4); + 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; } @@ -766,8 +813,8 @@ height: 100%; box-shadow: inset 0px 4px 4px -4px rgba(0, 0, 0, 0.1); border-bottom: 0; - border-right: 1px solid #ddd; - background: #f3f3f3; + border-right: 1px solid #dcdcde; + background: #f6f7f7; } .edit-attachment-frame .attachment-info .details, @@ -777,12 +824,12 @@ float: none; margin-bottom: 15px; padding-bottom: 15px; - border-bottom: 1px solid #ddd; + border-bottom: 1px solid #dcdcde; } .edit-attachment-frame .attachment-info .filename { font-weight: 400; - color: #666; + color: #646970; } .edit-attachment-frame .attachment-info .thumbnail { @@ -805,7 +852,12 @@ clear: both; } +.copy-to-clipboard-container .copy-attachment-url { + white-space: normal; +} + .copy-to-clipboard-container .success { + color: #008a20; margin-right: 8px; } @@ -910,7 +962,7 @@ .imgedit-settings .disabled { /* WCAG 1.4.3 Text or images of text that are part of an inactive user interface component ... have no contrast requirement. */ - color: #a0a5aa; + color: #a7aaad; } .A1B1 { @@ -954,7 +1006,7 @@ .imgedit-menu .button:before { font: normal 16px/1 dashicons; margin-left: 8px; - speak: none; + speak: never; vertical-align: middle; position: relative; top: -2px; @@ -963,9 +1015,9 @@ } .imgedit-menu .button.disabled { - color: #a0a5aa; - border-color: #ddd; - background: #f7f7f7; + color: #a7aaad; + border-color: #dcdcde; + background: #f6f7f7; box-shadow: none; text-shadow: 0 1px 0 #fff; cursor: default; @@ -1005,7 +1057,7 @@ } .imgedit-crop-wrap img { - background-image: linear-gradient(-45deg, #c4c4c4 25%, transparent 25%, transparent 75%, #c4c4c4 75%, #c4c4c4), linear-gradient(-45deg, #c4c4c4 25%, transparent 25%, transparent 75%, #c4c4c4 75%, #c4c4c4); + 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; } @@ -1056,7 +1108,7 @@ #poststuff .imgedit-group-top .button-link { text-decoration: none; - color: #23282d; + color: #1d2327; } .imgedit-applyto .imgedit-label { @@ -1081,7 +1133,7 @@ margin: -1px -1px 0 0; padding: 0; background: transparent; - color: #0074a2; + color: #2271b1; font-size: 20px; line-height: 1; cursor: pointer; @@ -1090,9 +1142,9 @@ } .image-editor .imgedit-settings .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; } @@ -1116,7 +1168,7 @@ } span.imgedit-scale-warn { - color: #dc3232; + color: #d63638; font-size: 20px; font-style: normal; visibility: hidden; @@ -1153,7 +1205,7 @@ width: 7px; text-align: center; font-size: 13px; - color: #444; + color: #3c434a; } .imgedit-settings .imgedit-scale-button-wrapper { @@ -1170,15 +1222,19 @@ max-width: 100%; } -.mejs-container { +.wp-core-ui .mejs-container { width: 100%; max-width: 100%; } -.mejs-container .mejs-controls { +.wp-core-ui .mejs-container * { box-sizing: border-box; } +.wp-core-ui .mejs-time { + box-sizing: content-box; +} + /* =Media Queries -------------------------------------------------------------- */ @@ -1233,6 +1289,12 @@ } } +@media only screen and (max-width: 600px) { + .media-item-wrapper { + grid-template-columns: 1fr; + } +} + /** * Media queries for media grid. */