diff -r 490d5cc509ed -r cf61fcea0001 wp/wp-includes/css/media-views-rtl.css --- a/wp/wp-includes/css/media-views-rtl.css Tue Jun 09 11:14:17 2015 +0000 +++ b/wp/wp-includes/css/media-views-rtl.css Mon Oct 14 17:39:30 2019 +0200 @@ -2,26 +2,27 @@ * Base Styles */ .media-modal * { - -webkit-box-sizing: content-box; - -moz-box-sizing: content-box; box-sizing: content-box; } -.media-frame input, -.media-frame select, -.media-frame textarea { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; +.media-modal input, +.media-modal select, +.media-modal textarea { + box-sizing: border-box; } .media-modal, .media-frame { - font-family: "Open Sans", sans-serif; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 12px; -webkit-overflow-scrolling: touch; } +.media-modal legend, +.media-modal label { + font-size: 13px; +} + .media-frame input, .media-frame textarea { padding: 6px 8px; @@ -35,11 +36,20 @@ .media-frame a { border-bottom: none; - color: #21759b; + color: #0073aa; +} + +.media-frame a:hover, +.media-frame a:active { + color: #00a0d2; } -.media-frame a:hover { - color: #d54e21; +.media-frame a:focus { + box-shadow: + 0 0 0 1px #5b9dd9, + 0 0 2px 1px rgba(30, 140, 190, .8); + outline: none; + color: #124964; } .media-frame a.button { @@ -63,11 +73,11 @@ .media-frame input[type="url"], .media-frame textarea, .media-frame select { - font-family: "Open Sans", sans-serif; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 12px; border-width: 1px; border-style: solid; - border-color: #dfdfdf; + border-color: #ddd; } .media-frame input[type="text"]:focus, @@ -97,8 +107,17 @@ -webkit-appearance: textfield; } -.media-frame :-moz-placeholder { - color: #a9a9a9; +.media-frame ::-webkit-input-placeholder { + color: #72777c; +} + +.media-frame ::-moz-placeholder { + color: #72777c; + opacity: 1; +} + +.media-frame :-ms-input-placeholder { + color: #72777c; } .media-frame .hidden { @@ -115,7 +134,6 @@ */ .ui-draggable-handle, .ui-sortable-handle { - -ms-touch-action: none; touch-action: none; } @@ -153,46 +171,43 @@ .media-modal-close { position: absolute; - text-decoration: none; - top: 10px; - left: 10px; - width: 30px; - height: 30px; + top: 0; + left: 0; + width: 50px; + height: 50px; + margin: 0; + padding: 0; + border: 1px solid transparent; + background: none; + color: #666; z-index: 1000; - -webkit-transition: color .1s ease-in-out, background .1s ease-in-out; + cursor: pointer; + outline: none; transition: color .1s ease-in-out, background .1s ease-in-out; } +.media-modal-close:hover, .media-modal-close:active { - -webkit-box-shadow: none; - box-shadow: none; + color: #00a0d2; +} + +.media-modal-close:focus { + color: #00a0d2; + border-color: #5b9dd9; + box-shadow: 0 0 3px rgba( 0, 115, 170, .8 ); } .media-modal-close span.media-modal-icon { - display: block; - margin-top: 5px; - width: 30px; - height: 15px; background-image: none; - text-align: center; } .media-modal-close .media-modal-icon:before { - content: '\f158'; - font: normal 20px/1 'dashicons'; + content: "\f158"; + font: normal 20px/1 dashicons; speak: none; vertical-align: middle; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - color: #666; -} - -.media-modal-close:hover .media-modal-icon:before { - color: #00a0d2; -} - -.media-modal-close:active { - outline: 0; } .media-modal-content { @@ -203,13 +218,28 @@ bottom: 0; overflow: auto; min-height: 300px; - -webkit-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; } -.media-modal-icon { +.media-modal-content .media-frame select.attachment-filters { + margin-top: 11px; + margin-left: 2%; + width: 42%; + width: calc(48% - 12px); +} + +.media-modal-content .media-toolbar-primary .media-button { + float: left; +} + +.media-modal-content .attachments-browser .search { + width: 100%; +} + +/* higher specificity */ +.wp-core-ui .media-modal-icon { background-image: url(../images/uploader-icons.png); background-repeat: no-repeat; } @@ -225,10 +255,24 @@ z-index: 100; height: 60px; padding: 0 16px; - border: 0 solid #dfdfdf; + border: 0 solid #ddd; overflow: hidden; } +.media-frame-toolbar .media-toolbar { + top: initial; + bottom: -45px; + height: auto; + overflow: initial; + border-top: 1px solid #ddd; +} + +@media screen and (max-width: 782px) { + .media-frame-toolbar .media-toolbar { + bottom: -48px; + } +} + .media-toolbar-primary { float: left; height: 100%; @@ -290,10 +334,12 @@ width: 100%; } -.media-sidebar h3, -.image-details h3 { +.media-sidebar h3, /* Back-compat for pre-4.4 */ +.image-details h3, /* Back-compat for pre-4.4 */ +.media-sidebar h2, +.image-details h2 { position: relative; - font-weight: bold; + font-weight: 600; text-transform: uppercase; font-size: 12px; color: #666; @@ -356,11 +402,11 @@ min-height: 22px; padding-top: 8px; line-height: 16px; - font-weight: normal; + font-weight: 400; color: #666; } -.compat-item label span { +.compat-item label span { text-align: left; } @@ -382,8 +428,6 @@ .attachment-details .setting input[type="url"], .attachment-details .setting textarea, .attachment-details .setting .value { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; box-sizing: border-box; margin: 1px; width: 65%; @@ -462,8 +506,6 @@ .compat-item .field textarea { width: 100%; margin: 0; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; box-sizing: border-box; } @@ -507,7 +549,7 @@ } .media-menu > a:hover { - color: #21759B; + color: #0073aa; background: rgba( 0, 0, 0, 0.04 ); } @@ -518,7 +560,7 @@ .media-menu .active, .media-menu .active:hover { color: #23282d; - font-weight: bold; + font-weight: 600; } .media-menu .separator { @@ -543,7 +585,6 @@ } .media-router a { - -webkit-transition: none; transition: none; } @@ -634,7 +675,6 @@ overflow: auto; background: #fff; border-top: 1px solid #ddd; - border-bottom: 1px solid #ddd; } .media-frame-toolbar { @@ -644,6 +684,8 @@ bottom: 0; height: 60px; z-index: 100; + bottom: 60px; + height: auto; } .media-frame.hide-menu .media-frame-title, @@ -653,29 +695,22 @@ right: 0; } -.media-frame.hide-menu .media-frame-menu { - right: -200px; -} - .media-frame.hide-toolbar .media-frame-content { bottom: 0; } -.media-frame.hide-toolbar .media-frame-toolbar { - bottom: -61px; -} - .media-frame.hide-router .media-frame-content { top: 50px; } -.media-frame.hide-router .media-frame-router { +.media-frame.hide-menu .media-frame-menu, +.media-frame.hide-router .media-frame-router, +.media-frame.hide-toolbar .media-frame-toolbar { display: none; } .media-frame.hide-router .media-frame-title { - border-bottom: 1px solid #dfdfdf; - -webkit-box-shadow: 0 4px 4px -4px rgba( 0, 0, 0, 0.1 ); + border-bottom: 1px solid #ddd; box-shadow: 0 4px 4px -4px rgba( 0, 0, 0, 0.1 ); } @@ -700,6 +735,10 @@ height: 100%; } +.wp-customizer:not(.mobile) .media-frame-content .crop-content.site-icon { + margin-left: 300px; +} + .media-frame-content .crop-content .crop-image { display: block; margin: auto; @@ -739,7 +778,6 @@ margin-top: 11px; margin-left: 2%; max-width: 42%; - max-width: -webkit-calc(48% - 12px); max-width: calc(48% - 12px); } @@ -754,8 +792,8 @@ margin-top: 11px; padding: 4px; font-size: 13px; - color: #464646; - font-family: "Open Sans", sans-serif; + color: #444; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; -webkit-appearance: none; } @@ -779,7 +817,7 @@ float: right; padding: 8px; margin: 0; - color: #464646; + color: #444; cursor: pointer; list-style: none; text-align: center; @@ -788,17 +826,12 @@ -ms-user-select: none; user-select: none; width: 25%; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; box-sizing: border-box; } .wp-core-ui .attachment:focus, .wp-core-ui .selected.attachment:focus, .wp-core-ui .attachment.details:focus { - -webkit-box-shadow: - inset 0 0 2px 3px #fff, - inset 0 0 0 7px #5b9dd9; box-shadow: inset 0 0 2px 3px #fff, inset 0 0 0 7px #5b9dd9; @@ -806,28 +839,19 @@ } .wp-core-ui .selected.attachment { - -webkit-box-shadow: - inset 0 0 0 5px #fff, - inset 0 0 0 7px #ccc; box-shadow: inset 0 0 0 5px #fff, inset 0 0 0 7px #ccc; } .wp-core-ui .attachment.details { - -webkit-box-shadow: - inset 0 0 0 3px #fff, - inset 0 0 0 7px #1e8cbe; box-shadow: inset 0 0 0 3px #fff, - inset 0 0 0 7px #1e8cbe; + inset 0 0 0 7px #0073aa; } .wp-core-ui .attachment-preview { position: relative; - -webkit-box-shadow: - inset 0 0 15px rgba( 0, 0, 0, 0.1 ), - inset 0 0 0 1px rgba( 0, 0, 0, 0.05 ); box-shadow: inset 0 0 15px rgba( 0, 0, 0, 0.1 ), inset 0 0 0 1px rgba( 0, 0, 0, 0.05 ); @@ -836,7 +860,7 @@ } .wp-core-ui .attachment-preview:before { - content: ''; + content: ""; display: block; padding-top: 100%; } @@ -854,7 +878,6 @@ bottom: 0; right: 0; opacity: 1; - -webkit-transition: opacity .1s; transition: opacity .1s; } @@ -867,14 +890,13 @@ } .wp-core-ui .attachment .thumbnail:after { - content: ''; + content: ""; display: block; position: absolute; top: 0; right: 0; left: 0; bottom: 0; - -webkit-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; } @@ -890,20 +912,17 @@ right: 0; width: 100%; height: 100%; - -webkit-transform: translate( -50%, 50% ); - -ms-transform: translate(-50%,50%); /* Fails with spaces?? Weird! */ + -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% ); - -ms-transform: translate(50%,-50%); transform: translate( 50%, -50% ); } .wp-core-ui .attachments-browser .attachment .thumbnail .centered img.icon { -webkit-transform: translate( 50%, -70% ); - -ms-transform: translate(50%,-70%); transform: translate( 50%, -70% ); } @@ -921,9 +940,8 @@ max-height: 100%; word-wrap: break-word; text-align: center; - font-weight: bold; + font-weight: 600; background: rgba( 255, 255, 255, 0.8 ); - -webkit-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 ); } @@ -935,7 +953,7 @@ position: absolute; } -.wp-core-ui .attachment .close { +.wp-core-ui .attachment-close { display: block; position: absolute; top: 5px; @@ -943,54 +961,43 @@ height: 22px; width: 22px; padding: 0; - font-size: 20px; - line-height: 20px; - text-align: center; - text-decoration: none; - color: #464646; background-color: #fff; background-position: -96px 4px; - border-width: 0; - -webkit-border-radius: 3px; border-radius: 3px; - -webkit-box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.3 ); box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.3 ); - -webkit-transition-duration: none; - transition-duration: none; - -webkit-transition-property: none; - transition-property: none; + transition: none; } -.wp-core-ui .attachment a.close:hover, -.wp-core-ui .attachment a.close:focus { - -webkit-box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.6 ); - box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.6 ); +.wp-core-ui .attachment-close:hover, +.wp-core-ui .attachment-close:focus { background-position: -36px 4px; - } .wp-core-ui .attachment .check { display: none; height: 24px; width: 24px; + padding: 0; + border: 0; position: absolute; z-index: 10; top: 0; left: 0; outline: none; background: #eee; - -webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba( 0, 0, 0, 0.15 ); + cursor: pointer; box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba( 0, 0, 0, 0.15 ); } -.wp-core-ui .attachment .check div { +.wp-core-ui .attachment .check .media-modal-icon { + display: block; background-position: -1px 0; height: 15px; width: 15px; margin: 5px; } -.wp-core-ui .attachment .check:hover div { +.wp-core-ui .attachment .check:hover .media-modal-icon { background-position: -40px 0; } @@ -1001,23 +1008,20 @@ .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: #1e8cbe; - -webkit-box-shadow: - 0 0 0 1px #fff, - 0 0 0 2px #1e8cbe; + background-color: #0073aa; box-shadow: 0 0 0 1px #fff, - 0 0 0 2px #1e8cbe; + 0 0 0 2px #0073aa; } -.wp-core-ui .attachment.details .check div, -.wp-core-ui .media-frame.mode-grid .attachment.selected .check div { +.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; } -.wp-core-ui .attachment.details .check:hover div, -.wp-core-ui .attachment.selected .check:focus div, -.wp-core-ui .media-frame.mode-grid .attachment.selected .check:hover div { +.wp-core-ui .attachment.details .check:hover .media-modal-icon, +.wp-core-ui .attachment.selected .check:focus .media-modal-icon, +.wp-core-ui .media-frame.mode-grid .attachment.selected .check:hover .media-modal-icon { background-position: -60px 0; } @@ -1028,7 +1032,6 @@ margin: 0; padding: 8px; font-size: 12px; - -webkit-border-radius: 0; border-radius: 0; } @@ -1090,20 +1093,28 @@ border: 0; cursor: pointer; height: 48px; + outline: none; + padding: 0; position: absolute; - left: 0; + left: 2px; text-align: center; - top: 0; - width: 50px; + top: 2px; + width: 48px; z-index: 1; } .uploader-inline .close:before { - font: normal 30px/50px 'dashicons' !important; - color: #777; + font: normal 30px/1 dashicons !important; + color: #555d66; display: inline-block; - content: '\f335'; + content: "\f335"; font-weight: 300; + margin-top: 1px; +} + +.uploader-inline .close:focus { + outline: 1px solid #5b9dd9; + box-shadow: 0 0 3px rgba( 0, 115, 170, .8 ); } .attachments-browser.hide-sidebar .attachments, @@ -1133,9 +1144,8 @@ height: 10px; width: 70%; margin: 10px auto; - -webkit-border-radius: 10px; border-radius: 10px; - background: #dfdfdf; + background: #ddd; background: rgba( 0, 0, 0, 0.1 ); } @@ -1143,10 +1153,8 @@ height: 10px; min-width: 20px; width: 0; - background: #1e8cbe; - -webkit-border-radius: 10px; + background: #0073aa; border-radius: 10px; - -webkit-transition: width 300ms; transition: width 300ms; } @@ -1174,11 +1182,8 @@ max-width: 400px; } -.media-sidebar .media-uploader-status { - border-bottom: 1px solid #dfdfdf; -} - -.uploader-inline .media-uploader-status h3 { +.uploader-inline .media-uploader-status h3, /* Back-compat for pre-4.4 */ +.uploader-inline .media-uploader-status h2 { display: none; } @@ -1197,7 +1202,7 @@ } .media-uploader-status .upload-count { - color: #464646; + color: #444; } .media-uploader-status .upload-dismiss-errors, @@ -1216,36 +1221,44 @@ .media-sidebar .media-uploader-status .upload-dismiss-errors { position: absolute; - top: 0; - left: 0; + top: -10px; + left: -10px; + padding: 10px; + transition: none; +} + +.media-sidebar .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 { + color: #c00; } .upload-errors .upload-error { - margin: 8px auto 0 auto; - padding: 8px; - border: 1px #c00 solid; - background: #ffebe8; - -webkit-border-radius: 3px; - border-radius: 3px; + padding: 12px; + margin-bottom: 12px; + background: #fff; + border-right: 4px solid #dc3232; + box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); } -.upload-errors .upload-error-label { - padding: 2px 4px; - margin-left: 8px; - font-weight: bold; - color: #fff; - background: #e00; - background-image: -webkit-gradient(linear, right top, right bottom, from(#e00), to(#a00)); - background-image: -webkit-linear-gradient(top, #e00, #a00); - background-image: linear-gradient(to bottom, #e00, #a00); - -webkit-border-radius: 3px; - border-radius: 3px; +.uploader-inline .upload-errors .upload-error { + background-color: #fbeaea; + box-shadow: none; +} + +.upload-errors .upload-error-filename { + font-weight: 600; } .upload-errors .upload-error-message { display: block; padding-top: 8px; - color: #b44; word-wrap: break-word; } @@ -1260,7 +1273,6 @@ display: none; text-align: center; opacity: 0; - -webkit-transition: opacity 250ms; transition: opacity 250ms; } @@ -1273,14 +1285,14 @@ border: 1px dashed #fff; } -.uploader-window h3 { +.uploader-window h3, /* Back-compat for pre-4.4 */ +.uploader-window h1 { margin: -0.5em 0 0; position: absolute; top: 50%; right: 0; left: 0; -webkit-transform: translateY( -50% ); - -ms-transform: translateY(-50%); transform: translateY( -50% ); font-size: 40px; color: #fff; @@ -1328,7 +1340,8 @@ margin: 0 0 4em; } -.uploader-inline h3 { +.uploader-inline h3, /* Back-compat for pre-4.4 */ +.uploader-inline h2 { font-size: 20px; line-height: 28px; font-weight: 400; @@ -1337,8 +1350,8 @@ .uploader-inline .has-upload-message .upload-instructions { font-size: 14px; - color: #464646; - font-weight: normal; + color: #444; + font-weight: 400; } .uploader-inline .drop-instructions { @@ -1402,37 +1415,36 @@ padding-top: 12px; font-size: 14px; line-height: 20px; - font-weight: bold; + font-weight: 600; } -.media-selection .selection-info a { - display: block; +.media-selection .button-link { float: right; padding: 1px 8px; margin: 1px -8px 1px 8px; line-height: 16px; + border-left: 1px solid #ddd; + color: #0073aa; text-decoration: none; - border-left: 1px solid #dfdfdf; - color: #21759B; } -.media-selection .selection-info a:hover { - background: #21759B; - color: #fff; - border-color: transparent; +.media-selection .button-link:hover, +.media-selection .button-link:focus { + color: #00a0d2; } -.media-selection .selection-info a:last-child { +.media-selection .button-link:last-child { border-left: 0; margin-left: 0; } -.media-selection .selection-info .clear-selection { - color: red; +.selection-info .clear-selection { + color: #bc0b0b; } -.media-selection .selection-info .clear-selection:hover { - background: red; +.selection-info .clear-selection:hover, +.selection-info .clear-selection:focus { + color: #dc3232; } .media-selection .selection-view { @@ -1467,7 +1479,6 @@ } .media-selection .attachment-preview { - -webkit-box-shadow: none; box-shadow: none; background: none; } @@ -1475,39 +1486,30 @@ .wp-core-ui .media-selection .attachment:focus, .wp-core-ui .media-selection .selected.attachment:focus, .wp-core-ui .media-selection .attachment.details:focus { - -webkit-box-shadow: - 0 0 0 1px #fff, - 0 0 2px 3px #5b9dd9; box-shadow: 0 0 0 1px #fff, 0 0 2px 3px #5b9dd9; } .wp-core-ui .media-selection .selected.attachment { - -webkit-box-shadow: none; box-shadow: none; } .wp-core-ui .media-selection .attachment.details { - -webkit-box-shadow: - 0 0 0 1px #fff, - 0 0 0 3px #1e8cbe; box-shadow: 0 0 0 1px #fff, - 0 0 0 3px #1e8cbe; + 0 0 0 3px #0073aa; } .media-selection:after { - content: ''; + content: ""; display: block; position: absolute; top: 0; left: 0; bottom: 0; width: 25px; - background-image: -webkit-gradient(linear, left top, right top, from(rgba( 255, 255, 255, 1 )), to(rgba( 255, 255, 255, 0 ))); - background-image: -webkit-linear-gradient(left, 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 ) ); + background-image: linear-gradient(to right, rgba( 255, 255, 255, 1 ), rgba( 255, 255, 255, 0 )); } .media-selection .attachment .filename { @@ -1519,7 +1521,6 @@ */ .media-frame .spinner { background: url(../images/spinner.gif) no-repeat; - -webkit-background-size: 20px 20px; background-size: 20px 20px; float: left; display: inline-block; @@ -1582,8 +1583,8 @@ } .attachment-info .filename { - font-weight: bold; - color: #464646; + font-weight: 600; + color: #444; word-wrap: break-word; } @@ -1600,7 +1601,6 @@ .uploading .attachment-info .thumbnail { width: 120px; height: 80px; - -webkit-box-shadow: inset 0 0 15px rgba( 0, 0, 0, 0.1 ); box-shadow: inset 0 0 15px rgba( 0, 0, 0, 0.1 ); } @@ -1609,14 +1609,13 @@ } .attachment-info .thumbnail-image:after { - content: ''; + content: ""; display: block; position: absolute; top: 0; right: 0; left: 0; bottom: 0; - -webkit-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; } @@ -1635,7 +1634,6 @@ } .attachment-info .edit-attachment, -.attachment-info .refresh-attachment, .attachment-info .delete-attachment, .attachment-info .trash-attachment, .attachment-info .untrash-attachment { @@ -1644,12 +1642,10 @@ white-space: nowrap; } -.attachment-info .refresh-attachment, .attachment-details.needs-refresh .attachment-info .edit-attachment { display: none; } -.attachment-details.needs-refresh .attachment-info .refresh-attachment, .attachment-info .edit-attachment { display: block; } @@ -1657,13 +1653,18 @@ .media-modal .delete-attachment, .media-modal .trash-attachment, .media-modal .untrash-attachment { + display: inline; + padding: 0; color: #bc0b0b; } .media-modal .delete-attachment:hover, +.media-modal .delete-attachment:focus, .media-modal .trash-attachment:hover, -.media-modal .untrash-attachment:hover { - color: red; +.media-modal .trash-attachment:focus, +.media-modal .untrash-attachment:hover, +.media-modal .untrash-attachment:focus { + color: #dc3232; } /** @@ -1699,13 +1700,6 @@ position: static; } -.media-modal .imgedit-wait { - height: auto !important; - left: 0; - bottom: 0; - right: 0; -} - .media-modal .imgedit-wrap .imgedit-panel-content { padding: 16px; position: absolute; @@ -1719,7 +1713,7 @@ .media-modal .imgedit-wrap .imgedit-settings { background: #f3f3f3; border-right: 1px solid #ddd; - padding: 0 16px 16px; + padding: 20px 16px 16px; position: absolute; top: 0; left: 0; @@ -1732,7 +1726,6 @@ background: none; border: none; border-bottom: 1px solid #ddd; - -webkit-box-shadow: none; box-shadow: none; margin: 0; margin-bottom: 16px; @@ -1747,31 +1740,69 @@ padding: 0; } -.media-modal .imgedit-group-top h3 { +.media-modal .imgedit-group-top { + margin: 0; +} + +.media-modal .imgedit-group-top h3, /* Back-compat for pre-4.4 */ +.media-modal .imgedit-group-top h2, +.media-modal .imgedit-group-top h2 .button-link { + display: inline-block; text-transform: uppercase; font-size: 12px; color: #666; margin: 0; - margin-top: 24px; + margin-top: 3px; } -.media-modal .imgedit-group-top h3 a { +.media-modal .imgedit-group-top h3 a, /* Back-compat for pre-4.4 */ +.media-modal .imgedit-group-top h2 a, +.media-modal .imgedit-group-top h2 .button-link { text-decoration: none; color: #666; } -.media-modal .imgedit-help-toggle { +/* higher specificity than media.css */ +.wp-core-ui.media-modal .image-editor .imgedit-help-toggle, +.wp-core-ui.media-modal .image-editor .imgedit-help-toggle:hover, +.wp-core-ui.media-modal .image-editor .imgedit-help-toggle:active { + border: 1px solid transparent; + margin: 0; + padding: 0; + background: transparent; + color: #0074a2; + font-size: 20px; + line-height: 1; + cursor: pointer; + box-sizing: content-box; + box-shadow: none; +} + +.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 ); +} + +.wp-core-ui.media-modal .imgedit-group-top .dashicons-arrow-down.imgedit-help-toggle { + margin-top: -3px; +} + +.wp-core-ui.media-modal .image-editor h3 .imgedit-help-toggle { margin-top: -2px; - cursor: pointer; - color: #666; } .media-modal .imgedit-help-toggled span.dashicons:before { - content: '\f142'; + content: "\f142"; } -.media-modal .imgedit-group img { - margin-top: 5px; +.media-modal .imgedit-thumbnail-preview { + margin: 10px 0 0 8px; +} + +.imgedit-thumbnail-preview-caption { + display: block; } .media-modal .imgedit-wrap div.updated { @@ -1798,7 +1829,6 @@ padding: 12px 14px; width: 100%; min-width: 200px; - -webkit-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 ); } @@ -1823,10 +1853,17 @@ overflow: auto; } +.media-embed .embed-link-settings { + /* avoid Firefox to give focus to the embed preview container parent */ + overflow: visible; +} + .embed-preview img, .embed-preview iframe, -.embed-preview embed { +.embed-preview embed, +.mejs-container video { max-width: 100%; + vertical-align: middle; } .embed-preview a { @@ -1838,6 +1875,11 @@ height: auto; } +.mejs-container:focus { + outline: 1px solid #5b9dd9; + box-shadow: 0 0 2px 1px rgba(30, 140, 190, .8); +} + .image-details .media-modal { right: 140px; left: 140px; @@ -1857,8 +1899,6 @@ .image-details .embed-media-settings, .image-details .embed-media-settings div { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; box-sizing: border-box; } @@ -1872,10 +1912,12 @@ right: 0; } -.image-details .column-settings h3 { +.image-details .column-settings h3, /* Back-compat for pre-4.4 */ +.image-details .column-settings h2 { margin: 20px; padding-top: 20px; border-top: 1px solid #ddd; + color: #23282d; } .image-details .column-image { @@ -1895,24 +1937,30 @@ } .image-details .advanced-toggle { + padding: 0; color: #666; + text-transform: uppercase; text-decoration: none; - display: block; +} + +.image-details .advanced-toggle:hover, +.image-details .advanced-toggle:active { + color: #666; } .image-details .advanced-toggle:after { - font: normal 20px/1 'dashicons'; + font: normal 20px/1 dashicons; speak: none; vertical-align: top; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - content: '\f140'; + content: "\f140"; display: inline-block; margin-top: -2px; } .image-details .advanced-visible .advanced-toggle:after { - content: '\f142'; + content: "\f142"; } .image-details .embed-media-settings .size { @@ -1929,7 +1977,7 @@ } .image-details .custom-size span small { - color: #999; + color: #555d66; /* #f3f3f3 background */ font-size: inherit; } @@ -1943,7 +1991,7 @@ } .image-details .custom-size:after { - content: ''; + content: ""; display: table; clear: both; } @@ -1961,14 +2009,13 @@ } .media-embed .thumbnail:after { - content: ''; + content: ""; display: block; position: absolute; top: 0; right: 0; left: 0; bottom: 0; - -webkit-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; } @@ -2056,7 +2103,6 @@ } /* Drag & drop on the editor upload */ -#wp-fullscreen-body .uploader-editor, .wp-editor-wrap .uploader-editor { background: rgba( 150, 150, 150, 0.9 ); position: absolute; @@ -2069,17 +2115,6 @@ text-align: center; } -#wp-fullscreen-body .uploader-editor { - background: rgba( 0, 86, 132, 0.9 ); - position: fixed; - z-index: 100050; /* above the editor toolbar */ -} - -.wp-editor-wrap.wp-fullscreen-wrap .uploader-editor { - opacity: 0; -} - -#wp-fullscreen-body .uploader-editor-content, .wp-editor-wrap .uploader-editor-content { border: 1px dashed #fff; position: absolute; @@ -2089,18 +2124,16 @@ bottom: 10px; } -#wp-fullscreen-body .uploader-editor .uploader-editor-title, .wp-editor-wrap .uploader-editor .uploader-editor-title { position: absolute; top: 50%; right: 0; left: 0; -webkit-transform: translateY( -50% ); - -ms-transform: translateY(-50%); transform: translateY( -50% ); font-size: 3em; line-height: 1.3; - font-weight: bold; + font-weight: 600; color: #fff; padding: 0; margin: 0; @@ -2111,7 +2144,6 @@ background: rgba( 0, 86, 132, 0.9 ); } -#wp-fullscreen-body .uploader-editor .uploader-editor-title, .wp-editor-wrap .uploader-editor.droppable .uploader-editor-title { display: block; } @@ -2247,7 +2279,6 @@ .media-frame:not(.hide-menu) .media-frame-title { right: 0; - color: #21759b; } .media-frame:not(.hide-menu) .media-frame-title .dashicons { @@ -2256,6 +2287,7 @@ } .media-frame:not(.hide-menu) .media-frame-title h1 { + color: #0073aa; line-height: 3; font-size: 18px; float: right; @@ -2437,8 +2469,6 @@ z-index: 1900; max-width: 70%; bottom: 120%; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; box-sizing: border-box; padding-bottom: 0; } @@ -2502,14 +2532,17 @@ @media only screen and (max-width: 480px) { .media-modal-close { - top: 5px; - left: 5px; + top: -5px; } .media-modal .media-frame-title { height: 40px; } + .wp-core-ui.wp-customizer .media-button { + margin-top: 13px; + } + .media-modal .media-frame-title h1, .media-frame:not(.hide-menu) .media-frame-title h1 { font-size: 18px; @@ -2541,9 +2574,8 @@ (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { - .media-modal-icon { + .wp-core-ui .media-modal-icon { background-image: url(../images/uploader-icons-2x.png); - -webkit-background-size: 134px 15px; background-size: 134px 15px; }