diff -r c7c34916027a -r 177826044cd9 wp/wp-includes/css/media-views-rtl.css --- a/wp/wp-includes/css/media-views-rtl.css Mon Oct 14 18:06:33 2019 +0200 +++ b/wp/wp-includes/css/media-views-rtl.css Mon Oct 14 18:28:13 2019 +0200 @@ -47,9 +47,10 @@ .media-frame a:focus { box-shadow: 0 0 0 1px #5b9dd9, - 0 0 2px 1px rgba(30, 140, 190, .8); - outline: none; + 0 0 2px 1px rgba(30, 140, 190, 0.8); color: #124964; + /* Only visible in Windows High Contrast mode */ + outline: 1px solid transparent; } .media-frame a.button { @@ -194,7 +195,10 @@ .media-modal-close:focus { color: #00a0d2; border-color: #5b9dd9; - box-shadow: 0 0 3px rgba( 0, 115, 170, .8 ); + box-shadow: 0 0 3px rgba(0, 115, 170, 0.8); + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; + outline-offset: -2px; } .media-modal-close span.media-modal-icon { @@ -218,7 +222,7 @@ bottom: 0; overflow: auto; min-height: 300px; - box-shadow: 0 5px 15px rgba(0,0,0,0.7); + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.7); background: #fcfcfc; -webkit-font-smoothing: subpixel-antialiased; } @@ -260,10 +264,10 @@ } .media-frame-toolbar .media-toolbar { - top: initial; + top: auto; bottom: -45px; height: auto; - overflow: initial; + overflow: visible; border-top: 1px solid #ddd; } @@ -427,7 +431,8 @@ .attachment-details .setting input[type="tel"], .attachment-details .setting input[type="url"], .attachment-details .setting textarea, -.attachment-details .setting .value { +.attachment-details .setting .value, +.attachment-details .setting + .description { box-sizing: border-box; margin: 1px; width: 65%; @@ -435,11 +440,19 @@ } .media-sidebar .setting .value, -.attachment-details .setting .value { +.attachment-details .setting .value, +.attachment-details .setting + .description { margin: 0 1px; text-align: right; } +.attachment-details .setting + .description { + clear: both; + font-size: 12px; + font-style: normal; + margin-bottom: 0.5em; +} + .media-sidebar .setting textarea, .attachment-details .setting textarea, .compat-item .field textarea { @@ -526,7 +539,7 @@ left: 0; bottom: 0; margin: 0; - padding: 10px 0; + padding: 50px 0 10px; background: #f3f3f3; border-left-width: 1px; border-left-style: solid; @@ -550,7 +563,7 @@ .media-menu > a:hover { color: #0073aa; - background: rgba( 0, 0, 0, 0.04 ); + background: rgba(0, 0, 0, 0.04); } .media-menu > a:active { @@ -711,7 +724,7 @@ .media-frame.hide-router .media-frame-title { border-bottom: 1px solid #ddd; - box-shadow: 0 4px 4px -4px rgba( 0, 0, 0, 0.1 ); + box-shadow: 0 4px 4px -4px rgba(0, 0, 0, 0.1); } .media-frame-title .dashicons { @@ -783,6 +796,8 @@ .media-frame select.attachment-filters:last-of-type { margin-left: 0; + width: auto; + max-width: 100%; } /** @@ -835,7 +850,9 @@ box-shadow: inset 0 0 2px 3px #fff, inset 0 0 0 7px #5b9dd9; - outline: none; + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; + outline-offset: -6px; } .wp-core-ui .selected.attachment { @@ -853,8 +870,8 @@ .wp-core-ui .attachment-preview { position: relative; box-shadow: - inset 0 0 15px rgba( 0, 0, 0, 0.1 ), - inset 0 0 0 1px rgba( 0, 0, 0, 0.05 ); + inset 0 0 15px rgba(0, 0, 0, 0.1), + inset 0 0 0 1px rgba(0, 0, 0, 0.05); background: #eee; cursor: pointer; } @@ -897,7 +914,7 @@ right: 0; left: 0; bottom: 0; - box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 ); + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); overflow: hidden; } @@ -912,17 +929,14 @@ right: 0; width: 100%; height: 100%; - -webkit-transform: translate( -50%, 50% ); /* Fails with spaces?? Weird! */ transform: translate( -50%, 50% ); } .wp-core-ui .attachment .thumbnail .centered img { - -webkit-transform: translate( 50%, -50% ); transform: translate( 50%, -50% ); } .wp-core-ui .attachments-browser .attachment .thumbnail .centered img.icon { - -webkit-transform: translate( 50%, -70% ); transform: translate( 50%, -70% ); } @@ -941,8 +955,8 @@ word-wrap: break-word; text-align: center; font-weight: 600; - background: rgba( 255, 255, 255, 0.8 ); - box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 ); + background: rgba(255, 255, 255, 0.8); + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15); } .wp-core-ui .attachment .filename div { @@ -964,7 +978,7 @@ background-color: #fff; background-position: -96px 4px; border-radius: 3px; - box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.3 ); + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3); transition: none; } @@ -986,7 +1000,7 @@ outline: none; background: #eee; cursor: pointer; - box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba( 0, 0, 0, 0.15 ); + box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba(0, 0, 0, 0.15); } .wp-core-ui .attachment .check .media-modal-icon { @@ -1014,6 +1028,11 @@ 0 0 0 2px #0073aa; } +.wp-core-ui .attachment.selected .check:focus { + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; +} + .wp-core-ui .attachment.details .check .media-modal-icon, .wp-core-ui .media-frame.mode-grid .attachment.selected .check .media-modal-icon { background-position: -21px 0; @@ -1113,8 +1132,8 @@ } .uploader-inline .close:focus { - outline: 1px solid #5b9dd9; - box-shadow: 0 0 3px rgba( 0, 115, 170, .8 ); + outline: 1px solid #5b9dd9; + box-shadow: 0 0 3px rgba(0, 115, 170, 0.8); } .attachments-browser.hide-sidebar .attachments, @@ -1146,7 +1165,7 @@ margin: 10px auto; border-radius: 10px; background: #ddd; - background: rgba( 0, 0, 0, 0.1 ); + background: rgba(0, 0, 0, 0.1); } .media-progress-bar div { @@ -1216,26 +1235,33 @@ } .media-uploader-status .upload-dismiss-errors { + position: absolute; + top: -3px; + left: -5px; + padding: 5px; + border-radius: 50%; + transition: none; text-decoration: none; } -.media-sidebar .media-uploader-status .upload-dismiss-errors { - position: absolute; - top: -10px; - left: -10px; - padding: 10px; - transition: none; +.uploader-inline .media-uploader-status .upload-dismiss-errors { + top: 2px; + left: 2px; } -.media-sidebar .media-uploader-status .upload-dismiss-errors:before { +.media-uploader-status .upload-dismiss-errors::before { content: "\f153"; display: block; font: normal 16px/1 dashicons; color: #72777c; } -.media-sidebar .media-uploader-status .upload-dismiss-errors:hover:before, -.media-sidebar .media-uploader-status .upload-dismiss-errors:focus:before { +.uploader-inline .errors.media-uploader-status .upload-dismiss-errors::before { + color: #606a73; +} + +.errors.media-uploader-status .upload-dismiss-errors:hover::before, +.errors.media-uploader-status .upload-dismiss-errors:focus::before { color: #c00; } @@ -1248,6 +1274,7 @@ } .uploader-inline .upload-errors .upload-error { + padding: 12px 30px; background-color: #fbeaea; box-shadow: none; } @@ -1268,7 +1295,7 @@ right: 0; left: 0; bottom: 0; - background: rgba( 0, 86, 132, 0.9 ); + background: rgba(0, 86, 132, 0.9); z-index: 250000; display: none; text-align: center; @@ -1292,7 +1319,6 @@ top: 50%; right: 0; left: 0; - -webkit-transform: translateY( -50% ); transform: translateY( -50% ); font-size: 40px; color: #fff; @@ -1489,6 +1515,8 @@ box-shadow: 0 0 0 1px #fff, 0 0 2px 3px #5b9dd9; + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; } .wp-core-ui .media-selection .selected.attachment { @@ -1509,7 +1537,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, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); } .media-selection .attachment .filename { @@ -1601,7 +1629,7 @@ .uploading .attachment-info .thumbnail { width: 120px; height: 80px; - box-shadow: inset 0 0 15px rgba( 0, 0, 0, 0.1 ); + box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.1); } .uploading .attachment-info .media-progress-bar { @@ -1616,7 +1644,7 @@ right: 0; left: 0; bottom: 0; - box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 ); + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15); overflow: hidden; } @@ -1781,8 +1809,9 @@ .wp-core-ui.media-modal .image-editor .imgedit-help-toggle:focus { color: #0074a2; border-color: #5b9dd9; - outline: none; - box-shadow: 0 0 3px rgba( 0, 115, 170, .8 ); + box-shadow: 0 0 3px rgba(0, 115, 170, 0.8); + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; } .wp-core-ui.media-modal .imgedit-group-top .dashicons-arrow-down.imgedit-help-toggle { @@ -1829,7 +1858,7 @@ padding: 12px 14px; width: 100%; min-width: 200px; - box-shadow: inset -2px 2px 4px -2px rgba( 0, 0, 0, 0.1 ); + box-shadow: inset -2px 2px 4px -2px rgba(0, 0, 0, 0.1); } .media-frame .embed-url .spinner { @@ -1877,7 +1906,7 @@ .mejs-container:focus { outline: 1px solid #5b9dd9; - box-shadow: 0 0 2px 1px rgba(30, 140, 190, .8); + box-shadow: 0 0 2px 1px rgba(30, 140, 190, 0.8); } .image-details .media-modal { @@ -2016,7 +2045,7 @@ right: 0; left: 0; bottom: 0; - box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 ); + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); overflow: hidden; } @@ -2028,6 +2057,15 @@ clear: both; } +.media-embed .setting.has-description { + margin-bottom: 5px; +} + +.media-embed .description { + clear: both; + font-style: normal; +} + .image-details .embed-media-settings .setting { float: none; width: auto; @@ -2057,11 +2095,17 @@ .image-details .embed-media-settings .setting input.link-to-custom, .image-details .embed-media-settings .link-target, -.image-details .embed-media-settings .custom-size { +.image-details .embed-media-settings .custom-size, +.image-details .description { margin-right: 27%; width: 70%; } +.image-details .description { + font-style: normal; + margin-top: 0; +} + .image-details .embed-media-settings .link-target { margin-top: 24px; } @@ -2104,7 +2148,7 @@ /* Drag & drop on the editor upload */ .wp-editor-wrap .uploader-editor { - background: rgba( 150, 150, 150, 0.9 ); + background: rgba(150, 150, 150, 0.9); position: absolute; top: 0; right: 0; @@ -2129,7 +2173,6 @@ top: 50%; right: 0; left: 0; - -webkit-transform: translateY( -50% ); transform: translateY( -50% ); font-size: 3em; line-height: 1.3; @@ -2141,7 +2184,7 @@ } .wp-editor-wrap .uploader-editor.droppable { - background: rgba( 0, 86, 132, 0.9 ); + background: rgba(0, 86, 132, 0.9); } .wp-editor-wrap .uploader-editor.droppable .uploader-editor-title { @@ -2352,7 +2395,8 @@ .attachment-details .setting input[type="tel"], .attachment-details .setting input[type="url"], .attachment-details .setting textarea, - .attachment-details .setting select { + .attachment-details .setting select, + .attachment-details .setting + .description { float: none; width: 98%; max-width: none; @@ -2402,6 +2446,15 @@ margin-right: 0; } + .image-details .embed-media-settings .setting.has-description { + margin-bottom: 5px; + } + + .image-details .description { + width: auto; + margin: 0 20px; + } + .image-details .embed-media-settings .custom-size { margin-right: 20px; } @@ -2508,8 +2561,9 @@ /* Landscape specific header override */ @media screen and (max-height: 400px) { - .media-menu { - padding: 0; + .media-menu, + .media-frame:not(.hide-menu) .media-menu { + top: 44px; } .media-frame-router { @@ -2530,6 +2584,14 @@ } } +@media only screen and (min-width: 901px) and (max-height: 400px) { + .media-menu, + .media-frame:not(.hide-menu) .media-menu { + top: 0; + padding-top: 44px; + } +} + @media only screen and (max-width: 480px) { .media-modal-close { top: -5px; @@ -2556,6 +2618,7 @@ .media-frame-router, .media-frame:not(.hide-menu) .media-menu { top: 40px; + padding-top: 0; } .media-frame-content {