From 568ba838b70dc6ffac1c76692c3892e8d1775732 Mon Sep 17 00:00:00 2001 From: Matt Thomas Date: Mon, 2 Dec 2013 17:58:45 +0000 Subject: [PATCH] Updating .wp-dialog styling to match the new admin design. Fixes #26328, props SergeyBiryukov, Ocean90. git-svn-id: https://develop.svn.wordpress.org/trunk@26528 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-admin/css/colors-fresh.css | 12 +++---- src/wp-includes/css/editor.css | 45 +++++++++++++----------- src/wp-includes/css/jquery-ui-dialog.css | 43 ++++++++++++---------- 3 files changed, 53 insertions(+), 47 deletions(-) diff --git a/src/wp-admin/css/colors-fresh.css b/src/wp-admin/css/colors-fresh.css index e17c2983db..ecae8ba00b 100644 --- a/src/wp-admin/css/colors-fresh.css +++ b/src/wp-admin/css/colors-fresh.css @@ -163,7 +163,7 @@ div.dashboard-widget, } #dashboard-widgets h4 { - color: #222; + color: #222; } #poststuff .inside label.spam, @@ -1936,19 +1936,15 @@ h2.nav-tab-wrapper, h3.nav-tab-wrapper { background-color: #fcfcfc; } -.clearlooks2 .mceFocus .mceTop .mceLeft, -.clearlooks2 .mceFocus .mceTop .mceRight { - background-color: #f3f3f3; -} - .clearlooks2 .mceTop span, .clearlooks2 .mceFocus .mceTop span { color: #222; } .clearlooks2 .mceClose:before { - color: #666; + color: #999; } + .clearlooks2 .mceClose:hover:before { color: #2ea2cc; } @@ -2054,4 +2050,4 @@ body.login { .wp_themeSkin .mceToolbar .mceSplitButton span.mce_bullist { background: none !important; } -} \ No newline at end of file +} diff --git a/src/wp-includes/css/editor.css b/src/wp-includes/css/editor.css index 32a5ff5c7d..e22d8d17a2 100644 --- a/src/wp-includes/css/editor.css +++ b/src/wp-includes/css/editor.css @@ -1638,33 +1638,24 @@ span.mce_ltr:before { .wp-dialog { padding: 0; z-index: 300002; - border: 1px solid #999; - -webkit-box-shadow: 0px 0px 16px rgba( 0,0,0,0.3 ); - box-shadow: 0px 0px 16px rgba( 0,0,0,0.3 ); + border: 0; + -webkit-box-shadow: 0 5px 15px rgba(0,0,0,0.7); + box-shadow: 0 5px 15px rgba(0,0,0,0.7); background-color: #f5f5f5; - -webkit-border-top-left-radius: 4px; - border-top-left-radius: 4px; - -webkit-border-top-right-radius: 4px; - border-top-right-radius: 4px; } .wp-dialog .ui-dialog-title { display: block; text-align: center; - padding: 1px 0 2px; + padding: 0; } .wp-dialog .ui-dialog-titlebar { padding: 0 1em; background-color: #444; - font-weight: bold; - font-size: 11px; - line-height: 18px; - color: #e5e5e5; - -webkit-border-top-left-radius: 3px; - border-top-left-radius: 3px; - -webkit-border-top-right-radius: 3px; - border-top-right-radius: 3px; + font-size: 13px; + line-height: 24px; + color: #fff; } .wp-dialog .ui-dialog-content { @@ -1675,11 +1666,25 @@ span.mce_ltr:before { cursor: pointer; -webkit-appearance: none; border: 0; - width: 29px; - height: 16px; + width: 30px; + height: 20px; top: 13px; right: 6px; - background: url('../js/tinymce/plugins/inlinepopups/skins/clearlooks2/img/buttons.gif') no-repeat -87px -16px; + background: none; +} + +.wp-dialog .ui-dialog-titlebar-close:before { + content: '\f158'; + font: normal 20px/1 'dashicons'; + speak: none; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + color: #999; + padding-left: 12px; +} + +.wp-dialog .ui-dialog-titlebar-close:hover:before { + color: #2ea2cc; } .wp-dialog .ui-dialog-titlebar-close .ui-button-text { @@ -1763,7 +1768,7 @@ span.mce_ltr:before { speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - color: #666; + color: #999; padding-left: 12px; } diff --git a/src/wp-includes/css/jquery-ui-dialog.css b/src/wp-includes/css/jquery-ui-dialog.css index 3750e3c371..6418ea361b 100644 --- a/src/wp-includes/css/jquery-ui-dialog.css +++ b/src/wp-includes/css/jquery-ui-dialog.css @@ -253,33 +253,24 @@ .wp-dialog { padding: 0; z-index: 300002; - border: 1px solid #999; - -webkit-box-shadow: 0px 0px 16px rgba( 0,0,0,0.3 ); - box-shadow: 0px 0px 16px rgba( 0,0,0,0.3 ); + border: 0; + -webkit-box-shadow: 0 5px 15px rgba(0,0,0,0.7); + box-shadow: 0 5px 15px rgba(0,0,0,0.7); background-color: #f5f5f5; - -webkit-border-top-left-radius: 4px; - border-top-left-radius: 4px; - -webkit-border-top-right-radius: 4px; - border-top-right-radius: 4px; } .wp-dialog .ui-dialog-title { display: block; text-align: center; - padding: 1px 0 2px; + padding: 0; } .wp-dialog .ui-dialog-titlebar { padding: 0 1em; background-color: #444; - font-weight: bold; - font-size: 11px; - line-height: 18px; - color: #e5e5e5; - -webkit-border-top-left-radius: 3px; - border-top-left-radius: 3px; - -webkit-border-top-right-radius: 3px; - border-top-right-radius: 3px; + font-size: 13px; + line-height: 24px; + color: #fff; } .wp-dialog .ui-dialog-content { @@ -290,11 +281,25 @@ cursor: pointer; -webkit-appearance: none; border: 0; - width: 29px; - height: 16px; + width: 30px; + height: 20px; top: 13px; right: 6px; - background: url('../js/tinymce/plugins/inlinepopups/skins/clearlooks2/img/buttons.gif') no-repeat -87px -16px; + background: none; +} + +.wp-dialog .ui-dialog-titlebar-close:before { + content: '\f158'; + font: normal 20px/1 'dashicons'; + speak: none; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + color: #999; + padding-left: 12px; +} + +.wp-dialog .ui-dialog-titlebar-close:hover:before { + color: #2ea2cc; } .wp-dialog .ui-dialog-titlebar-close .ui-button-text {