X-Git-Url: https://scripts.mit.edu/gitweb/autoinstalls/wordpress.git/blobdiff_plain/53f4633144ed68c8b8fb5861f992b5489894a940..3d39054f012aefe514b3f5509e32f09fc4feda44:/wp-includes/css/media-views-rtl.css diff --git a/wp-includes/css/media-views-rtl.css b/wp-includes/css/media-views-rtl.css index abab3dae..36802fd9 100644 --- a/wp-includes/css/media-views-rtl.css +++ b/wp-includes/css/media-views-rtl.css @@ -7,21 +7,26 @@ 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 { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + 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 +40,23 @@ .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 { + -webkit-box-shadow: + 0 0 0 1px #5b9dd9, + 0 0 2px 1px rgba(30, 140, 190, .8); + 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 +80,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 +114,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 { @@ -173,8 +199,8 @@ } .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; @@ -204,6 +230,30 @@ -webkit-font-smoothing: subpixel-antialiased; } +.media-modal-content .media-frame select.attachment-filters { + margin-top: 11px; + margin-left: 2%; + width: 42%; + width: -webkit-calc(48% - 12px); + width: calc(48% - 12px); +} + +.media-modal-content .attachments-browser .media-toolbar-secondary { + width: 66%; +} + +.media-modal-content .media-toolbar-primary.search-form { + width: 33%; +} + +.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); @@ -221,7 +271,7 @@ z-index: 100; height: 60px; padding: 0 16px; - border: 0 solid #dfdfdf; + border: 0 solid #ddd; overflow: hidden; } @@ -286,10 +336,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; @@ -352,11 +404,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; } @@ -503,7 +555,7 @@ } .media-menu > a:hover { - color: #21759B; + color: #0073aa; background: rgba( 0, 0, 0, 0.04 ); } @@ -514,7 +566,7 @@ .media-menu .active, .media-menu .active:hover { color: #23282d; - font-weight: bold; + font-weight: 600; } .media-menu .separator { @@ -670,7 +722,7 @@ } .media-frame.hide-router .media-frame-title { - border-bottom: 1px solid #dfdfdf; + border-bottom: 1px solid #ddd; -webkit-box-shadow: 0 4px 4px -4px rgba( 0, 0, 0, 0.1 ); box-shadow: 0 4px 4px -4px rgba( 0, 0, 0, 0.1 ); } @@ -754,8 +806,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 +831,7 @@ float: right; padding: 8px; margin: 0; - color: #464646; + color: #444; cursor: pointer; list-style: none; text-align: center; @@ -817,10 +869,10 @@ .wp-core-ui .attachment.details { -webkit-box-shadow: inset 0 0 0 3px #fff, - inset 0 0 0 7px #1e8cbe; + inset 0 0 0 7px #0073aa; 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 { @@ -836,7 +888,7 @@ } .wp-core-ui .attachment-preview:before { - content: ''; + content: ""; display: block; padding-top: 100%; } @@ -867,7 +919,7 @@ } .wp-core-ui .attachment .thumbnail:after { - content: ''; + content: ""; display: block; position: absolute; top: 0; @@ -921,7 +973,7 @@ 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 ); @@ -990,13 +1042,13 @@ .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; + background-color: #0073aa; -webkit-box-shadow: 0 0 0 1px #fff, - 0 0 0 2px #1e8cbe; + 0 0 0 2px #0073aa; box-shadow: 0 0 0 1px #fff, - 0 0 0 2px #1e8cbe; + 0 0 0 2px #0073aa; } .wp-core-ui .attachment.details .check .media-modal-icon, @@ -1088,10 +1140,10 @@ } .uploader-inline .close:before { - font: normal 30px/50px 'dashicons' !important; - color: #777; + font: normal 30px/50px dashicons !important; + color: #72777c; display: inline-block; - content: '\f335'; + content: "\f335"; font-weight: 300; } @@ -1124,7 +1176,7 @@ margin: 10px auto; -webkit-border-radius: 10px; border-radius: 10px; - background: #dfdfdf; + background: #ddd; background: rgba( 0, 0, 0, 0.1 ); } @@ -1132,7 +1184,7 @@ height: 10px; min-width: 20px; width: 0; - background: #1e8cbe; + background: #0073aa; -webkit-border-radius: 10px; border-radius: 10px; -webkit-transition: width 300ms; @@ -1163,7 +1215,8 @@ max-width: 400px; } -.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; } @@ -1182,7 +1235,7 @@ } .media-uploader-status .upload-count { - color: #464646; + color: #444; } .media-uploader-status .upload-dismiss-errors, @@ -1209,13 +1262,19 @@ padding: 12px; margin-bottom: 12px; background: #fff; - border-right: 4px solid #dd3d36; + border-right: 4px solid #dc3232; -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); } +.uploader-inline .upload-errors .upload-error { + background-color: #fbeaea; + -webkit-box-shadow: none; + box-shadow: none; +} + .upload-errors .upload-error-filename { - font-weight: bold; + font-weight: 600; } .upload-errors .upload-error-message { @@ -1248,7 +1307,8 @@ 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%; @@ -1303,7 +1363,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; @@ -1312,8 +1373,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 { @@ -1377,7 +1438,7 @@ padding-top: 12px; font-size: 14px; line-height: 20px; - font-weight: bold; + font-weight: 600; } .media-selection .button-link { @@ -1385,15 +1446,13 @@ padding: 1px 8px; margin: 1px -8px 1px 8px; line-height: 16px; - border-left: 1px solid #dfdfdf; - color: #21759B; + border-left: 1px solid #ddd; + color: #0073aa; } .media-selection .button-link:hover, .media-selection .button-link:focus { - background: #21759B; - color: #fff; - border-color: transparent; + color: #00a0d2; } .media-selection .button-link:last-child { @@ -1402,13 +1461,12 @@ } .selection-info .clear-selection { - color: red; + color: #bc0b0b; } .selection-info .clear-selection:hover, .selection-info .clear-selection:focus { - background: red; - color: #fff; + color: red; } .media-selection .selection-view { @@ -1467,14 +1525,14 @@ .wp-core-ui .media-selection .attachment.details { -webkit-box-shadow: 0 0 0 1px #fff, - 0 0 0 3px #1e8cbe; + 0 0 0 3px #0073aa; 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; @@ -1483,7 +1541,7 @@ 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 { @@ -1558,8 +1616,8 @@ } .attachment-info .filename { - font-weight: bold; - color: #464646; + font-weight: 600; + color: #444; word-wrap: break-word; } @@ -1585,7 +1643,7 @@ } .attachment-info .thumbnail-image:after { - content: ''; + content: ""; display: block; position: absolute; top: 0; @@ -1677,13 +1735,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; @@ -1697,7 +1748,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; @@ -1725,31 +1776,73 @@ 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 { - margin-top: -2px; +/* 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; - color: #666; + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; + -webkit-box-shadow: none; + box-shadow: none; +} + +.wp-core-ui.media-modal .image-editor .imgedit-help-toggle:focus { + color: #0074a2; + border-color: #5b9dd9; + outline: none; + -webkit-box-shadow: 0 0 3px rgba( 0, 115, 170, .8 ); + 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; } .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 { @@ -1863,10 +1956,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 { @@ -1892,18 +1987,18 @@ } .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 { @@ -1920,7 +2015,7 @@ } .image-details .custom-size span small { - color: #999; + color: #555d66; /* #f3f3f3 background */ font-size: inherit; } @@ -1934,7 +2029,7 @@ } .image-details .custom-size:after { - content: ''; + content: ""; display: table; clear: both; } @@ -1952,7 +2047,7 @@ } .media-embed .thumbnail:after { - content: ''; + content: ""; display: block; position: absolute; top: 0; @@ -2078,7 +2173,7 @@ transform: translateY( -50% ); font-size: 3em; line-height: 1.3; - font-weight: bold; + font-weight: 600; color: #fff; padding: 0; margin: 0; @@ -2224,7 +2319,6 @@ .media-frame:not(.hide-menu) .media-frame-title { right: 0; - color: #21759b; } .media-frame:not(.hide-menu) .media-frame-title .dashicons { @@ -2233,6 +2327,7 @@ } .media-frame:not(.hide-menu) .media-frame-title h1 { + color: #0073aa; line-height: 3; font-size: 18px; float: right; @@ -2521,7 +2616,7 @@ (-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;