X-Git-Url: https://scripts.mit.edu/gitweb/autoinstalls/wordpress.git/blobdiff_plain/ceb5a929e00123b4e224977c6b5a149f6431b250..refs/tags/wordpress-3.9:/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 ec70970e..34212a4e 100644 --- a/wp-includes/css/media-views-rtl.css +++ b/wp-includes/css/media-views-rtl.css @@ -3,8 +3,8 @@ */ .media-modal * { -webkit-box-sizing: content-box; - -moz-box-sizing: content-box; - box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; } .media-modal, @@ -57,9 +57,8 @@ .media-frame select { font-family: "Open Sans", sans-serif; font-size: 12px; - -moz-box-sizing: border-box; -webkit-box-sizing: border-box; - -ms-box-sizing: border-box; /* ie8 only */ + -moz-box-sizing: border-box; box-sizing: border-box; border-width: 1px; border-style: solid; @@ -86,21 +85,25 @@ color: #a9a9a9; } +.media-frame .hidden { + display: none; +} + /* Enable draggable on IE10 touch events until it's rolled into jQuery UI core */ .ui-sortable, .ui-draggable { -ms-touch-action: none; - touch-action: none; + touch-action: none; } .meta-box-sortables.ui-sortable { -ms-touch-action: auto; - touch-action: auto; + touch-action: auto; } .meta-box-sortables.ui-sortable .hndle { -ms-touch-action: none; - touch-action: none; + touch-action: none; } /** @@ -179,6 +182,7 @@ 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; @@ -266,7 +270,8 @@ width: 100%; } -.media-sidebar h3 { +.media-sidebar h3, +.image-details h3 { position: relative; font-weight: bold; text-transform: uppercase; @@ -453,6 +458,11 @@ user-select: none; } +.media-router a { + -webkit-transition: none; + transition: none; +} + .media-router > a { position: relative; float: right; @@ -507,7 +517,7 @@ top: 0; right: 0; bottom: 0; - width: 199px; + width: 200px; z-index: 150; } @@ -582,13 +592,10 @@ .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 ); box-shadow: 0 4px 4px -4px rgba( 0, 0, 0, 0.1 ); } -.media-frame .media-toolbar .add-to-gallery { - display: none; -} - .media-frame-title h1 { padding: 0 16px; font-size: 22px; @@ -596,6 +603,34 @@ margin: 0; } +.media-frame-title .suggested-dimensions { + font-size: 14px; + float: left; + margin-left: 20px; +} + +.media-frame-content .crop-content { + height: 100%; +} + +.media-frame-content .crop-content .crop-image { + display: block; + margin: auto; + max-width: 100%; + max-height: 100%; +} + +.media-frame-content .crop-content .upload-errors +{ + position: absolute; + width: 300px; + top: 50%; + right: 50%; + margin-right: -150px; + margin-left: -150px; + z-index: 600000; +} + /** * Iframes */ @@ -650,21 +685,21 @@ .attachment { position: relative; float: right; - padding: 0; margin: 0 10px 20px; color: #464646; list-style: none; text-align: center; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - -o-user-select: none; - user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } .selected.attachment { + -webkit-box-shadow: + 0 0 0 1px #fff, + 0 0 0 3px #ccc; box-shadow: 0 0 0 1px #fff, 0 0 0 3px #ccc; @@ -674,6 +709,9 @@ position: relative; width: 199px; height: 199px; + -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 ); @@ -706,6 +744,7 @@ 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; } @@ -724,18 +763,14 @@ width: 100%; height: 100%; -webkit-transform: translate( 50%, 50% ); - -moz-transform: translate( 50%, 50% ); - -ms-transform: translate( 50%, 50% ); - -o-transform: translate( 50%, 50% ); - transform: translate( 50%, 50% ); + -ms-transform: translate( 50%, 50% ); + transform: translate( 50%, 50% ); } .attachment .thumbnail .centered img { -webkit-transform: translate( -50%, -50% ); - -moz-transform: translate( -50%, -50% ); - -ms-transform: translate( -50%, -50% ); - -o-transform: translate( -50%, -50% ); - transform: translate( -50%, -50% ); + -ms-transform: translate( -50%, -50% ); + transform: translate( -50%, -50% ); } .attachment .filename { @@ -750,6 +785,7 @@ text-align: center; font-weight: bold; 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 ); } @@ -782,11 +818,14 @@ 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 ); } .attachment .close:hover { + -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 ); } @@ -803,6 +842,7 @@ left: -6px; outline: none; background: #eee; + -webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba( 0, 0, 0, 0.4 ); box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba( 0, 0, 0, 0.4 ); } @@ -822,12 +862,16 @@ } .attachment.details { + -webkit-box-shadow: 0 0 0 1px #fff, + 0 0 0 5px #1e8cbe; box-shadow: 0 0 0 1px #fff, 0 0 0 5px #1e8cbe; } .attachment.details .check { background-color: #1e8cbe; + -webkit-box-shadow: 0 0 0 1px #fff, + 0 0 0 2px #1e8cbe; box-shadow: 0 0 0 1px #fff, 0 0 0 2px #1e8cbe; } @@ -847,6 +891,7 @@ margin: -1px 0 0; padding: 8px; font-size: 12px; + -webkit-border-radius: 0; border-radius: 0; } @@ -888,6 +933,7 @@ line-height: 18px; font-size: 13px; color: #666; + margin-left: 0.5em; } /** @@ -898,6 +944,7 @@ height: 10px; width: 70%; margin: 10px auto; + -webkit-border-radius: 10px; border-radius: 10px; background: #dfdfdf; background: rgba( 0, 0, 0, 0.1 ); @@ -908,11 +955,9 @@ min-width: 20px; width: 0; background: #1e8cbe; + -webkit-border-radius: 10px; border-radius: 10px; - -webkit-transition: width 300ms; - -moz-transition: width 300ms; - -ms-transition: width 300ms; - -o-transition: width 300ms; + -webkit-transition: width 300ms; transition: width 300ms; } @@ -942,6 +987,7 @@ .media-sidebar .media-uploader-status { border-bottom: 1px solid #dfdfdf; + -webkit-box-shadow: 0 1px 0 #fff; box-shadow: 0 1px 0 #fff; } @@ -992,6 +1038,7 @@ padding: 8px; border: 1px #c00 solid; background: #ffebe8; + -webkit-border-radius: 3px; border-radius: 3px; } @@ -1003,9 +1050,8 @@ 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: -moz-linear-gradient(top, #e00, #a00); - background-image: -o-linear-gradient(top, #e00, #a00); - background-image: linear-gradient(to bottom, #e00, #a00); + background-image: linear-gradient(to bottom, #e00, #a00); + -webkit-border-radius: 3px; border-radius: 3px; } @@ -1023,17 +1069,12 @@ left: 0; bottom: 0; background: rgba( 0, 86, 132, 0.9 ); - z-index: 250000; display: none; text-align: center; opacity: 0; - -webkit-transition: opacity 250ms; - -moz-transition: opacity 250ms; - -ms-transition: opacity 250ms; - -o-transition: opacity 250ms; - transition: opacity 250ms; + transition: opacity 250ms; } .uploader-window-content { @@ -1052,11 +1093,8 @@ right: 0; left: 0; -webkit-transform: translateY( -50% ); - -moz-transform: translateY( -50% ); - -ms-transform: translateY( -50% ); - -o-transform: translateY( -50% ); - transform: translateY( -50% ); - + -ms-transform: translateY( -50% ); + transform: translateY( -50% ); font-size: 40px; color: #fff; padding: 0; @@ -1227,16 +1265,23 @@ } .attachment.selection.selected { + -webkit-box-shadow: none; box-shadow: none; } .attachment.selection.details { + -webkit-box-shadow: + 0 0 0 1px #fff, + 0 0 0 4px #1e8cbe; box-shadow: 0 0 0 1px #fff, 0 0 0 4px #1e8cbe; } .media-selection .attachment.selection.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; @@ -1250,11 +1295,9 @@ 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: -moz-linear-gradient(left, rgba( 255, 255, 255, 1 ) , rgba( 255, 255, 255, 0 ) ); - background-image: -o-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: -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 ) ); } .media-selection .attachment .filename { @@ -1266,7 +1309,8 @@ */ .media-frame .spinner { - background: url('../images/spinner.gif') no-repeat; + background: url(../images/spinner.gif) no-repeat; + -webkit-background-size: 20px 20px; background-size: 20px 20px; display: none; opacity: 0.7; @@ -1276,6 +1320,10 @@ margin: 0; } +.media-toolbar .spinner { + margin-top: 14px; +} + .media-sidebar .settings-save-status { background: #f5f5f5; float: left; @@ -1311,8 +1359,7 @@ margin-bottom: 16px; line-height: 18px; color: #666; - border-bottom: 1px solid #e5e5e5; - box-shadow: 0 1px 0 #fff; + border-bottom: 1px solid #ddd; padding-bottom: 11px; } @@ -1335,6 +1382,7 @@ .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 ); } @@ -1350,6 +1398,7 @@ 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; } @@ -1369,7 +1418,8 @@ .attachment-info .edit-attachment, .attachment-info .refresh-attachment, -.attachment-info .delete-attachment { +.attachment-info .delete-attachment, +.attachment-info .trash-attachment { display: block; text-decoration: none; white-space: nowrap; @@ -1385,11 +1435,13 @@ display: block; } -.attachment-info .delete-attachment { +.attachment-info .delete-attachment, +.attachment-info .trash-attachment { color: #bc0b0b; } -.attachment-info .delete-attachment:hover { +.attachment-info .delete-attachment:hover, +.attachment-info .trash-attachment:hover { color: red; } @@ -1406,12 +1458,109 @@ margin: 1.4em 0 0.4em; } -.gallery-settings { +.collection-settings { overflow: hidden; } +.collection-settings .setting input[type="checkbox"] { + float: right; + margin-left: 8px; +} + +.collection-settings .setting span { + min-width: inherit; +} + /** - * Embed from URL + * Image Editor + */ + +.media-frame .imgedit-wrap { + position: static; +} + +.media-frame .imgedit-wait { + height: auto !important; + left: 0; + bottom: 0; + right: 0; +} + +.media-frame .imgedit-wrap .imgedit-panel-content { + padding: 16px; + position: absolute; + top: 0; + left: 282px; + bottom: 0; + right: 0; + overflow: auto; +} + +.media-frame .imgedit-wrap .imgedit-settings { + background: #f3f3f3; + border-right: 1px solid #ddd; + padding: 0 16px 16px; + position: absolute; + top: 0; + left: 0; + bottom: 0; + width: 250px; + overflow: auto; +} + +.media-frame .imgedit-group { + background: none; + border: none; + border-bottom: 1px solid #ddd; + -webkit-box-shadow: none; + box-shadow: none; + margin: 0; + margin-bottom: 16px; + padding: 0; + padding-bottom: 16px; +} + +.media-frame .imgedit-group:last-of-type { + border: none; + margin: 0; + padding: 0; +} + +.media-frame .imgedit-group-top h3 { + text-transform: uppercase; + font-size: 12px; + color: #666; + margin: 0; + margin-top: 24px; +} + +.media-frame .imgedit-group-top h3 a { + text-decoration: none; + color: #666; +} + +.media-frame .imgedit-help-toggle { + margin-top: -2px; + cursor: pointer; + color: #666; +} + +.media-frame .imgedit-help-toggled span.dashicons:before { + content: '\f142'; +} + +.media-frame .imgedit-group img { + margin-top: 5px; +} + +.media-frame .imgedit-wrap div.updated { + margin: 0; + margin-bottom: 16px; +} + + +/** + * Embed from URL and Image Details */ .embed-url { display: block; @@ -1428,6 +1577,7 @@ 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 ); } @@ -1442,7 +1592,7 @@ } .embed-link-settings, -.embed-image-settings { +.embed-media-settings { position: absolute; top: 60px; right: 0; @@ -1452,6 +1602,114 @@ overflow: auto; } +.image-details .media-modal { + right: 140px; + left: 140px; +} + +.image-details .media-frame-menu { + display: none; +} + +.image-details .media-frame-title, +.image-details .media-frame-content, +.image-details .media-frame-router { + right: 0; +} + +.image-details .embed-media-settings { + top: 0; + overflow: visible; + padding: 0; +} + +.image-details .column-settings { + background: #f3f3f3; + border-left: 1px solid #ddd; + min-height: 100%; + width: 52%; + position: absolute; + top: 0; + right: 0; +} + +.image-details .column-settings h3 { + margin: 20px; + padding-top: 20px; + border-top: 1px solid #ddd; +} + +.image-details .column-image { + width: 48%; + position: absolute; + right: 52%; + top: 0; +} + +.image-details .image { + margin: 20px; +} + +.image-details .image img { + max-width: 100%; + max-height: 500px; +} + +.image-details .advanced-toggle { + color: #666; + text-decoration: none; + display: block; +} + +.image-details .advanced-toggle::after { + font: normal 20px/1 'dashicons'; + speak: none; + vertical-align: top; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + content: '\f140'; + display: inline-block; + margin-top: -2px; +} + +.image-details .advanced-visible .advanced-toggle::after { + content: '\f142'; + margin-top: 0; +} + +.image-details .embed-media-settings .size { + margin-bottom: 4px; +} + +.image-details .custom-size span { + display: block; +} + +.image-details .custom-size label { + display: block; + float: right; +} + +.image-details .custom-size span small { + color: #999; + font-size: inherit; +} + +.image-details .custom-size input { + width: 5em; +} + +.image-details .custom-size .sep { + float: right; + margin: 26px 6px 0 6px; +} + +.image-details .custom-size::after { + content: ''; + display: table; + clear: both; +} + .media-embed .thumbnail { max-width: 100%; max-height: 200px; @@ -1472,18 +1730,61 @@ 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; } .media-embed .setting { width: 100%; - margin-top: 10px; + margin: 10px 0; float: right; display: block; clear: both; } +.image-details .embed-media-settings .setting { + float: none; + width: auto; +} + +.image-details .actions { + margin: 10px 0; +} + +.image-details .hidden { + display: none; +} + +.media-embed .setting input[type="text"], +.media-embed .setting textarea { + display: block; + width: 100%; + max-width: 400px; + margin: 1px 0; +} + +.image-details .embed-media-settings .setting input[type="text"], +.image-details .embed-media-settings .setting textarea { + max-width: inherit; + width: 70%; +} + +.image-details .embed-media-settings .setting input.link-to-custom, +.image-details .embed-media-settings .link-target, +.image-details .embed-media-settings .custom-size { + margin-right: 27%; + width: 70%; +} + +.image-details .embed-media-settings .link-target { + margin-top: 24px; +} + +.media-embed .setting input.hidden { + display: none; +} + .media-embed .setting span { display: block; width: 200px; @@ -1492,16 +1793,88 @@ color: #666; } +.image-details .embed-media-settings .setting span { + float: right; + width: 25%; + text-align: left; + margin: 8px 1% 0 1%; + line-height: 1.1; +} + .media-embed .setting .button-group { margin: 2px 0; } -.media-embed .setting input, -.media-embed .setting textarea { - display: block; +.media-embed-sidebar { + position: absolute; + top: 0; + right: 440px; +} + +.advanced-section, +.link-settings { + margin-top: 10px; +} + +/* 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; + top: 0; + right: 0; width: 100%; - max-width: 400px; - margin: 1px 0; + height: 100%; + z-index: 99998; /* under the toolbar */ + display: none; + 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; + top: 10px; + right: 10px; + left: 10px; + 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; + color: #fff; + padding: 0; + margin: 0; + display: none; +} + +.wp-editor-wrap .uploader-editor.droppable { + 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; } /** @@ -1655,6 +2028,33 @@ top: 40%; } + .image-details .media-modal { + right: 30px; + left: 30px; + } + + .image-details .embed-media-settings .setting { + margin: 20px; + } + + .image-details .embed-media-settings .setting span { + float: none; + text-align: right; + width: 100%; + margin-bottom: 4px; + } + + .image-details .embed-media-settings .setting input.link-to-custom, + .image-details .embed-media-settings .setting input[type="text"], + .image-details .embed-media-settings .setting textarea { + width: 100%; + margin-right: 0; + } + + .image-details .embed-media-settings .custom-size { + margin-right: 20px; + } + .media-selection { min-width: 120px; } @@ -1674,7 +2074,7 @@ .media-modal-close { left: 10px; } - + /* Text inputs need to be 16px, or they force zooming on iOS */ .media-frame input[type="text"], .media-frame input[type="password"], @@ -1722,7 +2122,13 @@ .media-frame-title { display: none; } - + + .image-details .media-frame-title { + display: block; + top: 0; + font-size: 14px; + } + .media-frame-toolbar { position: absolute; bottom: 0px; @@ -1747,7 +2153,7 @@ .attachment-details h3 { margin-top: 45px; } - + /* Shorten right-side links so they don't overlap the close button */ .media-menu a:nth-child(2), .media-menu a:last-child { @@ -1773,20 +2179,24 @@ top: 84px; right: 0; } - + .media-frame-content { right: 0; top: 118px; } + .image-details .media-frame.hide-router .media-frame-content { + top: 40px; + } + .media-frame .attachments-browser { padding-bottom: 300px; } - + .media-sidebar { border-bottom: 1px solid #dddddd; } - + .media-modal { width: auto; } @@ -1813,7 +2223,8 @@ } /* Full-bleed modal */ - .media-modal { + .media-modal, + .image-details .media-modal { position: fixed; top: 0; right: 0; @@ -1845,17 +2256,27 @@ /* Image From Link */ .embed-link-settings, - .embed-image-settings { + .embed-media-settings { padding-bottom: 52px; } + .image-details .column-settings, + .image-details .column-image { + position: relative; + padding: 10px 0 20px 0; + right: 0; + width: 100%; + min-height: inherit; + } + + /* Gallery */ .media-frame.hide-router .media-frame-content { top: 73px; border-top: none; } - .gallery-settings h3 { + .collection-settings h3 { margin-top: 45px; } @@ -1892,7 +2313,7 @@ .media-frame-content { top: 78px; } - + .attachments-browser .attachments { top: 2px; } @@ -1920,10 +2341,11 @@ .media-modal-icon { background-image: url(../images/uploader-icons-2x.png); + -webkit-background-size: 134px 15px; background-size: 134px 15px; } .media-frame .spinner { - background-image: url('../images/spinner-2x.gif'); + background-image: url(../images/spinner-2x.gif); } -} \ No newline at end of file +}