diff --git a/wp-admin/css/color-picker-rtl.css b/wp-admin/css/color-picker-rtl.css new file mode 100644 index 0000000000..8c8869daa7 --- /dev/null +++ b/wp-admin/css/color-picker-rtl.css @@ -0,0 +1,27 @@ +.wp-color-result { + margin: 0 0 6px 6px; + padding-left: 0; + padding-right: 30px; +} + +.wp-color-result:after { + border-radius: 0 0 1px 1px; + border-left: 0; + border-right: 1px solid #bbb; + left: auto; + right: 0; +} + +.wp-color-result:hover { + border-color: #aaa; +} + +.wp-color-result:hover:after { + border-left: 0; + border-right: 1px solid #999; +} + +.wp-picker-container .button { + margin-left: 0; + margin-right: 6px; +} diff --git a/wp-admin/css/color-picker-rtl.min.css b/wp-admin/css/color-picker-rtl.min.css new file mode 100644 index 0000000000..8c8869daa7 --- /dev/null +++ b/wp-admin/css/color-picker-rtl.min.css @@ -0,0 +1,27 @@ +.wp-color-result { + margin: 0 0 6px 6px; + padding-left: 0; + padding-right: 30px; +} + +.wp-color-result:after { + border-radius: 0 0 1px 1px; + border-left: 0; + border-right: 1px solid #bbb; + left: auto; + right: 0; +} + +.wp-color-result:hover { + border-color: #aaa; +} + +.wp-color-result:hover:after { + border-left: 0; + border-right: 1px solid #999; +} + +.wp-picker-container .button { + margin-left: 0; + margin-right: 6px; +} diff --git a/wp-admin/css/color-picker.css b/wp-admin/css/color-picker.css index 03482898b9..925d890bb5 100644 --- a/wp-admin/css/color-picker.css +++ b/wp-admin/css/color-picker.css @@ -1,9 +1,11 @@ .wp-color-picker { width: 80px; } + .wp-picker-container .hidden { display: none; } + .wp-color-result { background-color: #f9f9f9; border: 1px solid #bbb; @@ -22,6 +24,7 @@ display: inline-block; padding-left: 30px; } + .wp-color-result:after { background: #f3f3f3; background-image: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#f4f4f4)); @@ -39,60 +42,66 @@ line-height: 22px; padding: 0 6px; position: relative; - right: 0px; + right: 0; text-align: center; - top: 0px; + top: 0; } + .wp-color-result:hover { border-color: #aaa; - box-shadow: 0 1px 1px rgba(0,0,0,0.1); - -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.1); - -ms-box-shadow: 0 1px 1px rgba(0,0,0,0.1); - -o-box-shadow: 0 1px 1px rgba(0,0,0,0.1); - -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.1); + -webkit-box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.2 ); + box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.1 ); } + .wp-color-result:hover:after { color: #222; border-color: #aaa; border-left: 1px solid #999; } + .wp-color-result.wp-picker-open { top: 0; } + .wp-color-result.wp-picker-open:after { content: attr( data-current ); } + .wp-picker-container, .wp-picker-container:active { display: inline-block; outline: 0; } + .wp-color-result:focus { border-color: #888; - -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.2); - -ms-box-shadow: 0 1px 2px rgba(0,0,0,0.2); - -o-box-shadow: 0 1px 2px rgba(0,0,0,0.2); - -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2); - box-shadow: 0 1px 2px rgba(0,0,0,0.2); + -webkit-box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.2 ); + box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.2 ); } + .wp-color-result:focus:after { border-color: #888; } + .wp-picker-open + .wp-picker-input-wrap { display: inline-block; vertical-align: top; } + .wp-picker-container .button { margin-left: 6px; } + .wp-picker-container .iris-square-slider .ui-slider-handle:focus { background-color: #555 } + .wp-picker-container .iris-picker { border-color: #dfdfdf; margin-top: 6px; } + input[type="text"].iris-error { background-color: #ffebe8; border-color: #c00; color: #000; -} \ No newline at end of file +} diff --git a/wp-includes/css/media-views-rtl.css b/wp-includes/css/media-views-rtl.css index 8ca1b37091..33753969ed 100644 --- a/wp-includes/css/media-views-rtl.css +++ b/wp-includes/css/media-views-rtl.css @@ -17,7 +17,6 @@ .media-frame-toolbar > .media-toolbar { left: 0; right: 200px; - border-width: 1px 0 0 0; } @@ -49,11 +48,8 @@ .media-sidebar { right: auto; left: 0; -} - -.hide-sidebar .media-sidebar { - right: auto; - left: -300px; + border-left: 0; + border-right: 1px solid #dfdfdf; } .media-sidebar .setting { @@ -104,6 +100,14 @@ box-shadow: inset 6px 0 6px -6px rgba( 0, 0, 0, 0.2 ) } +/** + * Frame + */ +.media-frame .region-content { + left: 0; + right: 200px; +} + /** * Attachment Browser Filters */ @@ -112,19 +116,6 @@ margin-left: 10px; } -/** - * Frame - */ -.media-frame .region-content { - left: 300px; - right: 200px; -} - -.media-frame.hide-sidebar .region-content { - right: 200px; - left: 0; -} - /** * Search */ @@ -137,7 +128,6 @@ * Attachments */ .attachments { - margin: 0; padding-right: 0; padding-left: 16px; } @@ -149,7 +139,6 @@ float: right; } -.attachment .icon, .attachment .thumbnail { left: auto; right: 0; @@ -165,13 +154,39 @@ left: -7px; } +/** + * Attachments Browser + */ +.attachments-browser .media-toolbar { + right: 0; + left: 300px; +} + +.attachments-browser .attachments, +.attachments-browser .uploader-inline { + right: 0; + left: 300px; +} + + /** * Progress Bar */ .attachment-preview .media-progress-bar { left: auto; right: 15%; - margin: -8px -4px 0 0; +} + +.media-sidebar .media-uploader-status .upload-dismiss-errors { + right: auto; + left: 0; +} + +.upload-errors .upload-error-label { + margin-right: 0; + margin-left: 8px; + float: right; + margin-top: -3px; } /** @@ -190,6 +205,8 @@ .media-selection .selection-info a { float: right; + border-right: 0; + border-left: 1px solid #dfdfdf; margin: 1px -8px 1px 8px; } @@ -201,7 +218,7 @@ .media-selection:after { right: auto; left: 0; - background-image: -webkit-gradient(linear, left top, left top, from( rgba( 255, 255, 255, 1 ) ), to( 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: -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 ) ); @@ -241,10 +258,7 @@ margin-left: 10px; } -.attachment-info .details { - float: right; -} - +.attachment-info .details, .attachment-info .compat-meta { float: right; } @@ -271,3 +285,21 @@ .media-embed .setting { float: right; } + +/** + * Responsive layout + */ +@media only screen and (max-width: 900px) { + .media-frame .region-content, + .media-frame-toolbar > .media-toolbar { + left: 0; + right: 120px; + } + + .attachments-browser .attachments, + .attachments-browser .uploader-inline, + .attachments-browser .media-toolbar { + right: 0; + left: 180px; + } +} diff --git a/wp-includes/script-loader.php b/wp-includes/script-loader.php index d9634dfdb0..42528f9f9a 100644 --- a/wp-includes/script-loader.php +++ b/wp-includes/script-loader.php @@ -494,7 +494,7 @@ function wp_default_styles( &$styles ) { $suffix = defined('SCRIPT_DEBUG') && SCRIPT_DEBUG ? '' : '.min'; - $rtl_styles = array( 'wp-admin', 'ie', 'media', 'admin-bar', 'customize-controls', 'media-views' ); + $rtl_styles = array( 'wp-admin', 'ie', 'media', 'admin-bar', 'customize-controls', 'media-views', 'wp-color-picker' ); // Any rtl stylesheets that don't have a .min version $no_suffix = array( 'farbtastic' );